Fission makes it easy to build and host web apps using only frontend and local development tools with no effort put into servers or deployment workflows.
In this guide, we will use the Fission CLI to publish the elm-pages-starter to the web.
Install Fission. Please follow the steps in the Installation guide to install and set up Fission on your machine before proceeding.
Clone the elm-pages-starter to your local development environment.
Install and build the app.
Once the elm-pages-starter is built, we are ready to publish it with Fission.
Initialize the project as a Fission app with fission app register. You will be prompted for a build directory.
Accept dist as your build directory, and fission will initialize your app.
Fission has created a fission.yaml file with your app configuration.
The url is where the app will be on the web after it has been published, build tells the fission which directory to publish, and ignore is a list of files and directories to ignore. See the Fission YAML guide for more details.
Run fission app publish to publish the webpage.
Copy the URL into your browser and you will see the elm-pages-starter live on the web!
It may take a few minutes for DNS to propagate. If you don't see the app live at the URL, come back and try again in a bit. You can also take the URL from the CLI output and view the app athttps://ipfs.runfission.com/ipfs/{URL}right away.
You can continuously update the hosted version of the app by running fission app publish --watch. Fission will watch the files in dist and publish when changes occur.
Where is my app? An app published with Fission runs locally and on the web on top of the InterPlanetary File System (IPFS). When you run fission up you are saving your app to IPFS on your machine and syncing it with a greater file system distributed across the web. It's like a part of your file system merges with the whole and your app becomes available to everyone with a browser!
We have put the elm-pages-starter out on the web without setting up a DevOps environment or going through a complex deployment workflow!
At this point your mind might be swimming with a thousand questions. Here are a couple of resources that explain how this all works:
WebNative: How to put a full stack directly in the browser talk at Speakeasy JS
In the next section, we will add Fission auth to the elm-pages-starter.