2.1) Setup dev environment

Hello all !

Link to   my Webapp
My app is powered by (built-on)   https://hasura.io/  Hasura PaaS.

Before I  share my experience on this topic , I need to give you an intro to Hasura project development  process.  further reading .

There are three ways in which you can develop and deploy a web/mobile app using Hasura services.
a) Have your own infrastructure  i.e. server. Which means convert your server computer/laptop/desktop into a Hasura server  and deploy hasura on it. But , it needs a 64 bit system.
or
b) Subscribe to a IaaS provider like Azure, Digital Ocean or Google cloud etc. and get Hasura deployed on it.
or
c) Deploy it on Hasura infrastructure

Since, I had a 32 bit system, I had to go for option (c).  Hasura was kind enough to allow me to use their  infrastructure for two months   (Normally its a 7 day free preview). Also they gave us additional $10 credits for Digital Ocean.

 So , I will talk about my experience of building a web app on  Hasura infrastructure  (For those who want to go for option (a) i.e. local development I recommend reading this blog of my fellow intern Hitesh).

Following are the steps:-

1. Create an account on beta.hasura.io.
2. Click on create a project.
3. Choose  a 7 day preview project hosted by Hasura .
4.  Your project will be ready in 10-20 mins, and you’ll get an email with login credentials.
5. Login to your  Hasura developer console , using the credentials.
6. Head to 'Advanced settings' > Authorized SSH keys> paste your systems public ssh key there (creating-ssh-keys).
7. Made my project live ,as follows:

A) Go to Add a custom service, in hasura project console.
B) Created an Endpoint named ‘app’.
 C)While doing that make sure to check the enabled ‘Git Push’
 D)set container port 8080
 E) Allowed role ‘user’ ( if make it admin) app will not load in browser , since its secure ‘https’ connection, hence will require authentication .
 F) Finally clicked ‘create’ button.

3. As a result of this  an empty remote project   ssh://hasura@app.veejay84.hasura-app.io/~/git/app/  got created in GitHub. Now I had to sync with this remote github project from my computer. Which I did, as Follows :-

i)I had to take my systems public ssh key and Add it into the Authorised SSH keys of hasura in the Advanced Settings console of my hasura project console. To check whether my system already has a public ssh key
 I A) opened the windows cmd prompt
 B) and run cd %userprofile%/.ssh , which gave message "No such file or directory", i.e. there aren't any existing keys
 C) So I had to generate one by running this command ssh-keygen -t rsa, as a result a file id_rsa.pub  containing the newly generated public ssh key was created in my home folder at location  /home/J D Singh/.ssh/id_rsa.pub. I copied this single line but quite long, ssh key from there and entered it into the Advanced setting’s Authorised SSH key text area .  

ii) cloned the hasura’s quickstart-docker-git , git repository in my project directory D:\stateoftheart to import an Git repository which had a DOCKERFILE in it and also server as an example/sample nodejs-express project to begin/start my work i.e. my backend coding,  by running this command

D:\stateoftheart> git clone URL of  hasura/quickstart-docker-git repository <enter>

(got the URL by clicking clone/download button on this repo’s git page) . This git repo is avaiable at https://github.com/hasura/quickatart-git  .

iii) changed the current working directory to my project directory

i.e. D:/stateoftheart/quickstart-docker-git/nodejs-express> and initialise this local directory as a Git directory by running

D:/stateoftheart/quickstart-docker-git/nodejs-express> git init <enter>

This initialised empty Git repository in

D:/stateoftheart/quickstart-docker-git/nodejs-express/.git/

iv) Added all the files of nodejs-express in this new local Git repository by running

D:/stateoftheart/quickstart-docker-git/nodejs-express> git add . <enter>

NOTE : the dot ‘.’ After  add in the above command is very essential to add ALL the files.

v) Add the remote (my app’s git ) repository in this local git repository by running

D:/stateoftheart/quickstart-docker-git/nodejs-express> git remote add hasura ssh://hasura@app.veejay84.hasura-app.io/~/git/app/ <enter>

(NOTE: This also creates an alias ‘hasura’ for the git repository ssh://hasura@app.veejay84.hasura-app.io/~/git/app/ , so that we can just use ‘hasura’ in place of ‘ssh://hasura@app.veejay84.hasura-app.io/~/git/app/ ‘ for all our git commands like add, commit , push .

vi) Finally to send our server.js file from my working directory nodejs-express , we run the following command which builds, containerises and deploys this code in the server container

D:/stateoftheart/quickstart-docker-git/nodejs-express> git push hasura master <enter>

With this my Hello world app goes live !!

vii) Now finally I make some changes in the server.js file and to reflect it in server I run following three commands

a)  D:/stateoftheart/quickstart-docker-git/nodejs-express> git add D:/stateoftheart/quickstart-docker-git/nodejs-express/server.js <enter>

   b)  D:/stateoftheart/quickstart-docker-git/nodejs-express> git commit –m “make better” <enter>

   c)  D:/stateoftheart/quickstart-docker-git/nodejs-express> git push hasura master <enter>

And the changed page was live !!

     d) In the same way I added rest of the files of nodejs-express, my logo,                      main.css etc all files one by one to the remote repo.

2. Created the Home page structure, in server.js file

Thanks
Please leave your comments.
Recommeded blogs:
1.) https://medium.com/@clint8875