Quickstart guide for a static website

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 . Then, log in into the Wasmer CLI and follow the provided steps to provide the CLI access to your Wasmer account.

wasmer login

Deploy!

We begin creating a new empty directory.

mkdir my-new-site
cd my-new-site

Then, running a single command, we can setup a static website.

wasmer deploy --template=static-website             

Expect to see output similar to this:

It seems you are trying to create a new app!
✔ Who should own this app? · wasmer-user
✔ What should be the name of the app? · my-new-site
✔ Unpacked template
✔ Do you want to deploy the app now? · yes
Loading local package (manifest path: ~/wasmer-user/Projects/my-new-site/.)
✔ Correctly built package locally
✔ Package correctly uploaded
✔ Succesfully pushed release to namespace wasmer-user on the registry
Deploying app my-new-site (wasmer-user) to Wasmer Edge...
 
App my-new-site (wasmer-user) was successfully deployed 🚀
https://my-new-site-wasmer-user.wasmer.app
 
→ Unique URL: https://2dyh6i3cvx1y.id.wasmer.app
→ Dashboard:  https://wasmer.io/apps/wasmer-user/my-new-site
 
Waiting for new deployment to become available...
(You can safely stop waiting now with CTRL-C)

The above command will do the following:

1. Download the template from the registry
2. Store the template locally in your current directory (try running ls -la)
3. Deploy it to Wasmer Edge

Try clicking the URL which is under the deployment message https://my-new-site-wasmer-user.wasmer.app, and expect to see something like:

Update the app

To illustrate the lifecycle of an app, let’s edit the index.html file in the public folder:

Your directory structure should look like this:

• my-new-site
  • LICENSE
  • README.md
  • app.yaml
  • public
    • index.html
  • settings
    • config.toml
  • wasmer.toml

Lets modify index.html:

sed -i -e 's/Hi from the Edge/This is our new title!/g' public/index.html 

Now, let’s redeploy it:

wasmer deploy

When refreshing the browser, expect the page to have been updated:

Add your content

Currently, the public directory only contains a basic index.html file.

You can now modify this directory and copy your own files (HTML, CSS, JavaScript, images, etc) as needed.

Test your site locally

You can also test your site locally before deploying the app on Wasmer Edge by running the following command:

wasmer run .

This will start a local server using the Static Web Server on http://localhost:8080. You can also specify a different port by passing the --port flag, as in wasmer run . -- --port=<your-port>.