Deploying a Rust + Yew Frontend to AWS Amplify

Since it was the Obon holiday, I thought I'd give Rust a try, but in the end, I ended up fighting with AWS without diving too deep into Rust.

What this article covers

We will deploy a web application created with Yew, a Rust frontend framework, to AWS Amplify.

What is Yew?

It is a modern Rust framework for creating multi-threaded frontend web applications using WebAssembly.
https://yew.rs/

It seems like you can write the frontend in Rust with a feel similar to React.

What is AWS Amplify?

It is an AWS service for building web and mobile applications.
https://aws.amazon.com/amplify/
Amplify has many features for web application development, but this time we will use Amplify Hosting among them.

Procedures for deploying a Yew app to AWS Amplify

I referred to the following regarding the setup of Yew:
https://zenn.dev/azukiazusa/articles/rust-base-web-front-fremework-yew

Installing necessary tools

amplify cli

npm install -g @aws-amplify/cli

Yew-related

Rust

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

Trunk

cargo install trunk

WebAssembly target

rustup target add wasm32-unknown-unknown

Creating the Project

Initialize Amplify

amplify init

You will be asked several questions when running the command above, but I'll omit them here.
Please refer to the official documentation.
https://aws.amazon.com/getting-started/guides/deploy-webapp-amplify/module-one/

Creating the Frontend with Yew

I'll outline the steps briefly, but please refer to the official documentation for details.
https://yew.rs/docs/getting-started/build-a-sample-app

Create a Cargo Project

I didn't want the files to get mixed up with those automatically generated by Amplify if created directly in the repository root, so I placed the Yew app under the frontend directory.

cargo new frontend && cd frontend

Adding .gitignore

I expected cargo new to create a .gitignore, but for some reason, it wasn't created, so I'll create one manually.

.gitignore

/target/
/dist/
**/*.rs.bk

Creating a Web Frontend with Yew (Hello World)

Adding Yew to Cargo.toml

Cargo.toml

[package]
name = "frontend"
version = "0.1.0"
edition = "2021"

# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

[dependencies]
+ yew = "0.19"

Editing the Source Code

Edit main.rs.

src/main.rs

use yew::prelude::*;

#[function_component(App)]
fn app() -> Html {
    html! {
        <h1>{ "Hello World!!" }</h1>
    }
}

fn main() {
    yew::start_app::<App>();
}

Create index.html directly under the frontend directory.

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Yew App</title>
  </head>
</html>

Running the App

trunk serve

Check in the browser

OK

Configuring Deployment with amplify.yml

Return to the repository root and create amplify.yml.

amplify.yml

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - cd frontend
        # install rust
        - curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y
        - source ~/.cargo/env
        # install trunk
        - cargo install trunk
        # add WASM target
        - rustup target add wasm32-unknown-unknown
    build:
      commands:
        - trunk build
  artifacts:
    baseDirectory: frontend/dist
    files:
      - "**/*"
  cache:
    paths:
      - frontend/target/**/*

This simply builds after installing the necessary tools.
Installing Rust every time you build is inefficient, so preparing a custom image with Rust pre-installed would be better, but for now, this will suffice...

For more details on amplify.yml, please refer to the documentation.
https://docs.aws.amazon.com/amplify/latest/userguide/build-settings.html

Push to GitHub

Now that we have something that at least works, let's push it to GitHub.
Keep in mind that the repository you link with Amplify must be private.
(This is also why I can't provide a link to the finished product in this article...)

Connecting Amplify Hosting and GitHub to Publish the App

Linking Amplify and GitHub from the AWS Console

When you log in to AWS via your browser and go to the Amplify page, you should see the project that was created when you ran amplify init.
Simply select GitHub from the hosting setup screen and connect it to the repository you just pushed.

Build and Deploy

Amplify will build and deploy the application according to the amplify.yml settings we wrote earlier. Wait for it to complete.

Verify in the Browser

Once the deployment is finished, access the Amplify URL in your browser to verify it.

OK

Conclusion

For now, I successfully managed to deploy it!!
Building a frontend in something other than JavaScript feels quite refreshing.
However, since I've only just reached the point of deployment, I haven't yet explored what else is possible.
Since practical application is difficult without backend integration, I'm hoping to see more good insights on this topic emerge from somewhere (I'm counting on others' help!)