Starter guide for deploying a react app

In this guide, you'll learn the process of publishing a static site using react on Wasmer Edge.

Prerequisites

The project requires the following tools to be installed on your system:

Deploying a Static Site

Install Wasmer

Click here for instructions on how to install Wasmer if you haven't done it already!

Log in into Wasmer

Create a new account in Wasmer (opens in a new tab). Then, log in into the Wasmer CLI and follow the provided steps to provide the CLI access to your Wasmer account.

wasmer login

Initialize the React Starter template

ℹ️

If you have already your react project with you, you can skip to the next step.

Clone the starter template from GitHub and install the dependencies:

git clone https://github.com/wasmerio/edge-react-starter.git
cd edge-react-starter
pnpm install

By now, you should have a react project installed and ready to go. Let's build it, in preparation for future steps:

pnpm run build

Setup a current react project for Wasmer Edge

ℹ️

This step is for those who already have a react project with them. If you are starting from scratch, you can follow the step above to get a boilerplate react project with vite.

Run the commands below to initialize files for Wasmer Edge:

wasmer app create --template static-site

  Who should own this package?:
  > <your-username>
  What package do you want to use?:
  > Create new package # 👈🏼 let's select this for this tutorial
    Use existing package
  What should the package be called?: react-edge-tutorial # 👈🏼 You can choose any name you like
  What should be the name of the app?: <your-username>-react-edge-tutorial
  Would you like to publish the app now? yes
  Creating the app...
  Publishing package...
  [1/2] ⬆️   Uploading...
  [2/2] 📦  Publishing...
  Successfully published package `<your-username>/react-edge-tutorial@0.1.0`
  Deploying app <your-username>/<your-username>-react-edge-tutorial...
 
   ✅ App <your-username>/<your-username>-react-edge-tutorial was successfully deployed!
 
  > App URL: https://<your-username>-react-edge-tutorial.wasmer.app
  > Versioned URL: https://x43izt2fk0n5.id.wasmer.app # 🌐 You can access our URL too
  > Admin dashboard: https://wasmer.io/apps/<your-username>/<your-username>-react-edge-tutorial
 
  Waiting for the app to become reachable...
  (You can safely exit now with CTRL-C)

The wasmer app create --template static-site command will prompt you for the following:

Package owner: This is the owner of the package. It can be your username or an organization.
Package: This is the package you want to use. You can either select an existing package or create a new one.
Package name: This is the name of your package. It must be unique across all packages on your namespace.
App name: This is the name of your app. It must be unique across all apps on your namespace.
Publish: This will publish the new package and app to the registry.

⚙️

As you see above in the last line of the output, the CLI will prompt you to publish the new package and app. We recommend publishing the package and app.

The above command will do the following:

Create a Wasmer package config (wasmer.toml)
Create a app config (app.yaml)
Create a public directory that holds the website data

⚙️

As mentioned above, the default public directory is public. You must change this for a react project to build or dist or any suitable directory other than public because it might contain your static assets such as favicon. The starter project in step 3.1, is setup with vite so the build directory is automatically set to dist.
For a react project you can do this by setting the outDir using the -o flag in the build script in package.json:

"scripts": {
  "build": "tsc && vite build" // 👈🏼 Ensure the build output ends up in the same place as wasmer.toml>fs.public
}

After this you would have to change your wasmer.toml to match your project's build directory:

wasmer.toml

[package]
name = "<your-wasmer-username>/<your-app-name>"
version = "0.1.0"
description = "Your cool react project's description"
 
[dependencies]
"sharrattj/static-web-server" = "1"
 
[fs]
public = "dist" # 👈🏼 dist or any other directory (keep consistent with package.json)

Test Your Site Locally

You can now test your site locally by running the following command:

wasmer run . -- --port 9000

This will start a local server using the Static Web Server on http://localhost:9000 and now you can access your site on the web at the URL provided in the output.

You can also specify a different port by changing the --port flag.

The arguments after -- are passed to the static web server.

ℹ️

You can see all the available options with wasmer run --help or click here to see the full documentation. To see all the available options for the static web server, run wasmer run . -- --help.

Deploy Your Site

First, we need to build our distribution:

pnpm run build

Once you have added all the necessary files to the public directory, it's time to update site.

Run the following command to deploy:

wasmer deploy

Expect output similar to this:

Loaded app from: /path/to/your/directory/app.yaml
 
Publish new version of package '<your-username>/react-edge-tutorial'? yes
Publishing package...
[1/2] ⬆️   Uploading...
[2/2] 📦  Publishing...
Successfully published package `<your-username>/react-edge-tutorial@0.1.1` # Notice the version number
Waiting for package to become available.....
Package '<your-username>/react-edge-tutorial@0.1.1' published successfully!
 
Deploying app <your-username>-react-edge-tutorial...
 
 ✅ App <your-username>-react-edge-tutorial was successfully deployed!
 
> App URL: https://<your-username>-react-edge-tutorial.wasmer.app
> Versioned URL: https://v1piztzfz41v.id.wasmer.app # 🌐 You can access our URL too
> Admin dashboard: https://wasmer.io/apps/<your-username>/<your-username>-react-edge-tutorial
 
Waiting for the app to become reachable...
(You can safely exit now with CTRL-C)
.
App is now reachable!

ℹ️

You must be in the directory holding the wasmer.toml and app.yaml config files.

ℹ️

wasmer deploy automatically publishes your package and bumps the minor version. You can check all the available options with wasmer deploy --help or click here to see the full documentation.

Now you can access your site on the web at the URL provided in the output.

♺

To make changes to your site, simply modify the files in the public directory and run wasmer deploy again to deploy the changes.

Conclusion

Congratulations! You have successfully deployed your react project on wasmer edge .

with MySQL Python Flask Server