Host Your Own Website

Hello guys, as per the previous tutorial on how to install ngrok and Node.js, let’s implement a small application on Odinub using ngrok and Node.js. So, in this tutorial, we learn about how we can make a website. How we can use Odinub as a server. Before that, we can make a small application on Odinub as a server lets figure it out what is the advantage to make on Odinub. Why use an Odinub as a web server, rather than using services providers specialized in web hosting? First, from an economic point of view, you should know that web hosting services are not free and that you have to pay every month/year. Unlike the Odinub which just needs a connection. In addition, by choosing Odinub, you have the possibility to modify your services as you want, which is generally not the case with specialized hosts. Firstly, you want to install ngrok and Node.js in your Odinub board. If you guys already installed ngrok and Node.js, then follow the step below. Follow all the given steps for that you have to open terminal and fire all the given commands.

Step 1

Connect your Odinub board with WiFi

If you start your Odinub first time then you should follow these articles to connect odinub wifi. Else you can fire the command.

ifupwlan0

Step 2

Make directory

mkdir NodeTest

Step 3

Copy ngrok and node.js in one directory.

cp ngrok node.js <your path> (NodeTest)

Step 4

Now make a.html file in NodeTest directory. And put the code following code in the index.html file.

nano index.html

The title command is to show you “HelloOdinub”. The second line is for favicon image it shows you an output section. The Roboto is the google fonts you guys have to change fonts than just put the google link there but make sure it should be google fonts.

       <title>HelloOdinub</title>       
 <link rel="icon" href="favicon.png" type="image/png" sizes="16x16">        <link rel="stylesheet" type="text/css" href="index.css">        
<link href= https://fonts.googleapis.com/css?family=Roboto&display=swap

This will print the odinub tag line tinker.build.share

      <h1><greet>Hello</greet> <span>odi</span>nub</h1> 
<p>tinker.build.share</p>

Step 5

Now make a.css file in NodeTest directory. And put the code following code in the index.css file.

nano index.css

Now in this application, we are going to use the two fonts Open Sans and Roboto in different style.

You can download Open Sans fonts here and you can take Roboto here.First, you have to download the font. Set a font named "open_sansbold", and specify the URL where it can be found then set the alignment, size, and colour for the element.

       font-family: open_sansbold;        
src: url(OpenSans-Bold-webfont.woff);
}
.container h1, p {       
              text-align: center;
}
.container h1 {     
                font-size: 50px;        
                color: rgb(7, 76, 159);

Below code is for the Odinub logo you can set accordingly. You can show the image below.

       font-size: 25px;       
       margin-top: -25px;        
       opacity: 0.5;        
       font-family: 'Tangerine', serif;
span {    
    background-color: rgba(7, 76, 159);        
    color: rgba(255, 255, 255);        
    padding-left: 20px;        
    padding-top: 25px;
}
greet {       
    color: black;

Step 6

Make a.js file in that directory only. And put the code following code in the index.js file.

nano <index.js>

const express = require('express')
const fs = require('fs')
const path = require('path')
const app = express()
app.use(express.static(path.join(__dirname)))
app.get('/', (req, res) => {       
                res.sendFile(path.join(__dirname, 'index.html'))
})
const port =  5000
app.listen(port, () => console.log(`Listening on port ${port}...`))

Now run this command on your Odinub terminal

Nodejs <index.js>

This command shows you the output:

The 5000 is your port number which already define in the code.Now open new terminal go to that directory where you can download the ngrok. Type the following command in your Odinub new terminal.

./ngrok http 5000

If your tunnel status is “online” you can open web browser anywhere. Note the host address and the port number shown in the picture below; you’ll use these to access the Odinub.

e55bcd3d.ngrok.io is your forwarding address you guy can copy paste on your web browser bar.

Then you will find the output:

Note: You have to open two terminals simultaneously to execute this application one is for Node.js and second is for ngrok then and then you will see your website on your web browser I am showing you the image you can get a clear picture what exactly I am saying.

If you get 200 OK then you are ready with your application.Now that you’re ready with ngrok, you can access your odinub from a remote network. Being able to access your odinub from outside your home or local network is crucial for home automation and internet of things projects. Now you can access your odinub from a mobile phone while you’re away, you can access it from a computer or have others access your odinub from outside your network. You’re ready to play around with internet-of-things projects using odinub.I hope this tutorial will help you to make a small application using Node.js and ngrok on Odinub. I hope you guys can make lots of IoT application and access your Odinub board as home or local host.