Edge
Guides
Static website

Quickstart guide for a static website

In this quickstart guide, you'll learn the process of deploying a static site on Wasmer Edge. We will cover installation of the CLI, setting up a new static site, and deploying it.

Deploying a static site

Install Wasmer

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

Initialize the local directory

⚛

If you want to deploy a static site made from frameworks like React, Vue, or Svelte, you can follow our React Static Site tutorial.

With the CLI installed, let's create a new static site! We begin creating a new empty directory - after that, we will need to run a single command.

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

The wasmer deploy --template=static-website command will prompt you for the following:

  • App owner: This is the owner of the app. It can be your username or an organization; if you're logged in, the command will prompt you to choose from your namespaces: by default, it will be your username.
  • App name: This is the name of your app. By default, it will be the name of the current directory.

The above command will do the following:

  • Download the template from the registry
  • Deploy it to Wasmer Edge with the user-provided informations
⚠️

Don't change the public directory attribute in the wasmer.toml file for this tutorial. If you want to learn how to specify a different directory for build output, check out our React Static Site tutorial.

This is what the static website looks like in a browser:

WASIX Explained

Update the app

Your directory structure should look like this:

    • LICENSE
    • README.md
    • app.yaml
      • index.html
      • config.toml
    • wasmer.toml

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

    $ pwd
.../my-new-site
$ sed -i -e 's/Hi from the Edge/This is our new title!/g' public/index.html 
$ wasmer deploy
Loading local package (manifest path: <current-working-directory>)
✔ Correctly built package locally
✔ Package correctly uploaded
✔ Succesfully pushed release to namespace <you> on the registry 
Deploying app <your-app-name> (<you>) to Wasmer Edge...
 
App <your-app-name> (<you>) was successfully deployed 🚀
https://<your-app-name>-<you>.wasmer.app
 
→ Unique URL: https://<app_id>.id.wasmer.app
→ Dashboard:  https://wasmer.io/apps/<you>/<your-app-name>
 
Waiting for new deployment to become available...
(You can safely stop waiting now with CTRL-C)
.
𖥔 Deployment complete
    WASIX Explained

    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 . --net

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

    ℹ️

    The arguments after -- (double dash) are passed to the underlying server running in the Wasmer runtime.

    ℹ️

    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.

    Conclusion

    Congratulations! You have successfully deployed a static site on Wasmer Edge 🚀.

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

    Resources

    wasmer-examples/static-website
    Getting StartedJS service worker