Quickstart for a Static Site

Install Wasmer CLI

Install the latest version of Wasmer CLI following the instructions here.

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 a Static Site

With the CLI installed, let's create a new static site!

Run the commands below to create a new directory and initialize:

$ mkdir my-new-site
$ cd my-new-site
$ 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?: my-new-site
What should be the name of the app?: <your-username>-my-new-site
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>/my-new-site@0.1.0`
Deploying app <your-username>/<your-username>-my-new-site...
 
 ✅ App <your-username>/<your-username>-my-new-site was successfully deployed!
 
> App URL: https://<your-username>-my-new-site.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>-my-new-site
 
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.

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

Your directory structure should look like this:

Add Your Site Content

Currently, the public directory only contains a basic index.html file. The index file should look like this by default in a browser:

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

For this quickstart, we will use the default index.html file.

Test Your Site Locally

You can also test your site locally before publishing by running the following command:

wasmer run . --net -- --port 9000

This will start a local server using the Static Web Server on http://localhost:9000.

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

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

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>/my-new-site'? yes
Publishing package...
[1/2] ⬆️   Uploading...
[2/2] 📦  Publishing...
Successfully published package `<your-username>/my-new-site@0.1.1` # Notice the version number
Waiting for package to become available.....
Package '<your-username>/my-new-site@0.1.1' published successfully!
 
Deploying app <your-username>-my-new-site...
 
 ✅ App <your-username>-my-new-site was successfully deployed!
 
> App URL: https://<your-username>-my-new-site.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>-my-new-site
 
Waiting for the app to become reachable...
(You can safely exit now with CTRL-C)
.
App is now reachable!

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.