App Screen 1

I am developing an app using hasura development tool. In this blog I will show you how I built simple web app screens using HTML, CSS, bootstrap and Express which is a Node.js framework . I have deployed my web app on the Hasura platform and my work is available online too.(link attached at the end)

Getting Started

I started with writing some html codes for my web pages which you can refer to on github. It is important to give your web page a centain structure and this structure must be pre-planned. You can find many free themes and templates for it here. After it is done we may proceed to the styling part.

Adding styles and making web pages responsive

CSS is basically Cascading Style Sheets.

These files control the layout of the html files. It maintains font, aligns the para and does much more!

Bootstrap logo
Designed for everyone, everywhere

Bootstrap makes the web pages responsive; which means that the screen adjusts itself when the same page is viewed in a mobile or a laptop screen.It also provides various HTML and CSS based design templates as well as themes for our web pages and the front-end design to embellish it and make it look well-ordered.

What Next?

The next step would be to navigate through our web pages and this is done using Express.

About Express

Fast, unopinionated, minimalist web framework for Node.js
Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.

We need to create a .js file which would include simple commands like app.get and res.send which would display our html files on the given url. Like in the following command when the /login is fetched in the url, the page login.html is rendered.

app.get('/login', function (req, res) {
res.sendFile('html/login.html',{root});
});

Also to add images and static files to the webpages the following command should be added in the .js file.

app.use(express.static(‘html’));

All the images and static file should be added in the html directory as given in the command.

Thus navigating and linking the html pages become very simple while using express. We can also try running this project on the localhost by mentioning the port number.

app.listen(8080, function () {
console.log('Example app listening on port 8080!');
});

The first “ screen” of my App

The first screen tells about the web app and how one can use it.

The next screenshot is the main screen one gets after logging in. In this page the user is can input the fields ad get results on the next page.

Apart from these two pages I have also built my login and register pages.

Check out my work online…

I have exposed my local project on the internet using hgrok which is a fork of ngrok and it let’s me share my hasura project. You can check it out here. Well, I am still working on my app so it may not contain all the features …and my app will work only when I am online, because you see in this case my laptop is the server which controls my app !!

This picture below will help understand how ngrok helps create a secure tunnel to expose the local project on local server to the internet behind a firewall!

src:https://i2.wp.com/reybango.com/images/ngrok.png?resize=640%2C427

Workflow

Firstly I created by HTML pages, added content and images to it, did styling using CSS, used bootstrap for responsiveness and finally did navigation between pages using res.sendFile command in express. Then I deployed this web app on hasura platform using basic git commands. And using ngrok I ha made my local project visible on this url. You may visit this url and share any views or doubts you have !