Deploying your HTML / CSS / JavaScript webapp in under a minute with Hasura

This post will help you deploy a webapp that you’re writing with HTML, CSS and JavaScript onto the cloud in just a few clicks.

Pre-requisites

1. You know git basics.
2. You know how to get your ssh key that git uses (eg: if you set up a github account and are able to git push to your github repo without entering a password every time, you already know this. But here’s a reference in case you don’t).

1. Create a Hasura project

First, get yourself a free Hasura project by registering on https://dashboard.hasura.io and clicking on the ‘Activate’ button.

2. Login to your console and add your SSH key

Login to your project console using the credentials you would have received over email once you created a project.

Login to your console.

Now get your SSH key. Here are some examples of how you could get your SSH key on different OSes:

Once you have your SSH key, paste it into the console by heading to the advanced section (click on the ⚙ icon on the left sidebar):

3. Setup an nginx based git repo for your work

3.1 Clone the quickstart repo to your computer: https://github.com/hasura/quickstart-docker-git

3.2 Copy the nginx folder to create your own app folder

cp -r quickstart-docker-git/nginx webapp

3.3 Initialise a new git repo in your own app folder

cd webapp/
git init
git add .
git commit -am 'Adds base repo files'

This app folder contains a basic ‘Hello world’ HTML webapp. You can see the source files in: app/src. Eg: the HTML file is: app/src/index.html.

4. Create a subdomain on your hasura project for your webapp

Head to the create service section (click on the ➕ icon the sidebar) and add a service as shown on the left.

After you click on create, you will automatically be redirected to the manage app page:

Manage app page.

5. Git push and deploy your webapp

5.1 Head to your git repo (webapp) that you created in step 3

cd webapp

5.2 Add a new git remote

Copy the git remote command from the manage app page. In this case, my project is lumber59, and so:

git remote add hasura ssh://hasura@app.lumber59.hasura-app.io/~/git/app/

5.3 Push this git repo to hasura

git push hasura master

This is what a successful git push will look like on the terminal:

5.4 Check out your deployed app:

Head to app.<project-name>.hasura-app.io. In my case, I head to: https://app.lumber59.hasura-app.io/

And it’s done!

6. Make a change and deploy again

To make a change to your project, change files in the app/src/ directory.

Commit and push again:

git commit -a 'Made some new changes'
git push hasura master

And after a successful push, your app will be live again:

Add backend APIs to your HTML, CSS and JS webapps in minutes with Hasura. Get started here: https://hasura.io