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
Step 3.1: Initialize the React Starter template
If you have already your react project with you, you can skip this step and follow the step 3.2.
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
Step 3.2: 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 3.1 to get a boilerplate react project with vite.
Run the commands below to initialize files for Wasmer Edge:
$ wasmer app create --type static-website
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 --type 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": "vite build -o dist" // 👈🏼 dist or any other directory (keep consistent with wasmer.toml)
}
After this you would have to change your wasmer.toml
to match your project's build directory:
[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)
Step 4: 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.
![WASIX Explained](/_next/static/media/edge-react.c7c48766.png)
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 avilable
options for the static web server, run wasmer run . -- --help
.
Step 6: Deploy Your Site
To deploy your site just build your site and run the following command:
$ pnpm run build
Run the following command to deploy your site:
Deploy Your Site
Once you have added all the necessary files to the public directory, it's time to update site.
Run the following command to deploy your site:
wasmer deploy
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 can checkout our versioned URL above to access how our starter demo looks like.
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.
Executing this command will package and deploy your site.
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.
![WASIX Explained](/_next/static/media/edge-react.c7c48766.png)
Conclusion
Congratulations! You have successfully deployed your react project on wasmer edge .