Now that your smart contracts are live on a public (test) network, you need to host your front end on the web so that users can start playing with your DApp.
There are several options. You can run a web server from home, which would take time and money, or you can use industry-leading hosting services like DigitalOcean or AWS, which charge a monthly fee (albeit small for the lower-end packages).
What you need is a free hosting service, that is fast and easy to use, and provides a platform to beta test your DApp.
These services exist! I’m going to walk through two of them. Introducing Heroku and GitHub Pages.
Heroku
“Heroku is a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud.” — Heroku.com
Heroku has great support for a multitude of tech and is especially good at deploying Node applications. Assuming you’re using Truffle Suite for your project, you’ll have no problem deploying with Heroku.
To deploy to Heroku using the command line, you first need to head to the Heroku downloads page and install the Heroku command-line interface (CLI)
Go to Heroku.com, create an account, and create a new app. Once you’ve performed the basic setup, head over to the “Settings” tab and locate your “Heroku git URL”. Figure 3 shows where to find it.
Open your terminal and navigate to your project root folder. Assuming you’re already using Git for version control, use the Heroku Git URL to add a new remote like this (where [heroku_git_url] is the URL from your Heroku app):
git remote add heroku [heroku_git_url]
Then, using the newly installed Heroku CLI, log in to your account:
heroku login
This should open up your browser to confirm. Once successfully logged in, all that’s left is to deploy! Run the following to push to Heroku:
git push heroku master
Wait for the logs to finish and voila, your DApp is now live!
Heroku assigns a URL depending on the name of your project. To open, head back to Heroku.com and click the “Open app” button shown in figure 4.
Your DApp is now live on Heroku!
GitHub Pages
“GitHub Pages is a static site hosting service that takes HTML, CSS, and JavaScript files straight from a repository on GitHub” — Github.com
Anyone who has used Git knows about GitHub. It’s the biggest open-source version control platform in the world and is used by countless developers every single day.
GitHub Pages is a service that allows the hosting of static websites directly from a GitHub repo. This means that as long as your app doesn’t do any server-side computation (like PHP, for example), you’re good to go!
If you’re not already using GitHub for your repo, I highly recommend you do to take advantage of this. Assume you are, and your project is using Truffle Suite, head to your command line and navigate to the root directory of your project.
Install the gh-pages package by running the following command:
npm install --save gh-pages
Next, you need to add a few details to your package.json file. Open the package file in your text editor.
Inside the main object, add the following, where [user-name] is your GitHub username and [repo-name] is the name of your GitHub repo:
"homepage": "https://[user-name].github.io/[repo-name]/",
Add the following options into the “scripts” section of the package.json:
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
All that’s left now is to run npm run deploy to deploy your DApp to GitHub Pages.
Your DApp is now live on GitHub Pages!
