Introduction: How to Build a Website on a Raspberry Pi, With Node.js, Express, and MongoDB...Part 1
Welcome to PART 1 of my node.js web app tutorial. Part 1 is going to go through the necessary software used for node.js app development, how to use port forwarding, how to build an app using Express, and how to run your app. The second part of this tutorial will go over all of the code and structure of my full web application. If you are ready for that visit it here.
So, while building my personal launch page I found it very difficult to get out of the weeds. There is more on the internet than even I will ever understand about building a webpage.
This is a walk through on how to use Node.js, Express, and Mongodb. to create a webpage.
The code for all of this is here.
My web Page is called The Internet. Please visit if you want a more interactive look at a personal website.
I started this page to have a personal presence on the internet with projects I have done, with links to my instructables projects for more details.
This site is hosted in my home on a pi zero W.
Step 1: Things You Need
1. Time. I cannot stress that to develop a site, and truly understand the inner workings, is a long drawn out process. I have a degree in electrical engineering with a focus in micro electronics, and a love for coding, and this still took me months to accomplish.
This tutorial will be a good building block, but please read more documentation online to understand each piece.
2. Raspberry pi - any model will do. Also any computer running linux will do. Actually, any computer will do, I just go into more detail on how to run it on a pi.
3. Internet connection - if you plan to host this to the world. A router or a network switch is needed to configure port forwarding.
4. Software - Any coding platform will work, Sublime, Webstorm, Notepadd++, Visual Studios, or anything else. I mainly used Webstorm or Sublime.
Step 2: Port Forwarding on Your Raspberry Pi
So, I am going to assume that you already have your raspberry pi set up. If not check out this easy tutorial here.
My pi is running Jessie lite, and is all terminal. The benefit of this is that I do not have lots of processes running in the background that might make my server run slower with high traffic. Let me state now that this tutorial is for low traffic sites. Any site with high traffic will be slow on a pi and might make your server crash.
Port forwarding
With your pi set up, you will have to enable port forwarding on your router or switch. To do this find the port forwarding settings in your router. Every router is different, I am showing my Linksys Velop GUI here.
My site is configured to port 3000, this can be changed in the source code in the app.js or www file.
I also have port 22 set up for forwarding so I can SSH into my pi, this can be set up in the pi settings. SSH is a way to use the terminal on your pi while not on the same network, and also while not using the display output from the pi. This allows me to update my website from a different computer and push the changes to my pi.
Follow the pictures to set up port forwarding.
DNS Service
You will need a service that links your ip address to a web address name. You will be able to type in your routers global ip address followed by the port number to access your site. This, however, is difficult especially if your global ip changes. What a DNS service does is track and update these changes so your web name and ip are linked. I choose to use a free service through no-ip. You are welcome to pay for anything you want. This is just a free way that I know of.
Step 3: Installing Needed Software on Pi
If you have downloaded my GitHub code you will not need to do anything except run a simple npm start command to get the site running. However, since this is a in depth tutorial I will be explaining how to install all needed software and packages.
While on your pi, or linux computer (there will be different commands for using windows), run the following commands.
I have broken these up as individual steps to make it easier to follow.
1. Install node.js and npm
Node.js is basically the java script that creates the server. NPM is node package manager and handles all of the middle-ware needed with node.js.
Run the following commands on a linux or mac machine to install.
curl -sL <a href="https://deb.nodesource.com/setup_6.x"> <a href="https://deb.nodesource.com/setup_6.x" rel="nofollow"> <a href="https://deb.nodesource.com/setup_6.x" rel="nofollow"> https://deb.nodesource.com/setup_6.x </a> </a> </a> | sudo -E bash sudo apt-get install -y nodejs
To download on windows, just use the exe found here.
This link is for linux help if not on a raspberry pi.
2. Install MongoDB
MongoDB is just that, a data base. I use this for a login and traffic counter portion of my web page.
Run the following commands on a linux or mac machine to install.
sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 0C49F3730359A14518585931BC711F9BA15703C6
echo "deb <a href="http://repo.mongodb.org/apt/debian"> <a href="http://repo.mongodb.org/apt/debian" rel="nofollow"> <a href="http://repo.mongodb.org/apt/debian" rel="nofollow"> http://repo.mongodb.org/apt/debian </a> </a> </a> jessie/mongodb-org/3.4 main" | sudo tee /etc/apt/sources.list.d/mongodb-org-3.4.list
sudo apt-get update
sudo apt-get install -y mongodb-org
To download on windows, just use the exe found here.
This link is for linux help if not on a raspberry pi.
3. Install Grunt
Grunt is like npm, as you can use it in conjunction with other plugins. I do not use it for my app, however it is very helpful when automating tasks. This step can be skipped completely for your app to function.
For windows, mac, or linux use the following command.
npm install -g grunt-cli
4. Install Express
Express is an easy way to use node js framework. We are going to install an express generator. This creates the easy to use framework of a web application.
For windows, mac, or linux use the following command.
npm install express-generator -g
Step 4: Create an Express Node.js App
Navigate to the folder location that you plan to have your app in. Once here all future installs will be inside this folder.
Run the following commands on a linux or mac machine to change directory.
sudo cd /home/pi/myapp
For Windows:
cd C:\Users\pi\Desktop\myapp
Use the express generator to create the node js framework needed.
express nameofmyapp
This will create a bare express node.js project, you can edit the features of it during this step by finding different commands as seen below using the -h command. Or you can manually edit the generated template, like I have. I will discuss this in more detail in part 2. You are able to add other variables to this code to change settings in your application such as using html, handlebars, jade, and others. For this run the command:
express -h
Continue setting up your node.js web application by running the following commands:
cd nameofmyapp
npm install
This installs all needed packages that your node.js web application will need to run and more that are available to use.
In this example the file path for the application would be:
/home/pi/myapp/nameofmyapp
This is because the express generator creates a file based on the string you place after it. If you are already in the desired directory, just use express.
Step 5: Run Your Web Application
To run your node.js web application, run the command:
npm start
To make it more efficient while coding so our application updates automatically after we make changes, we will install nodemon.
npm install -g nodemon
Here is where most tutorials would tell you to have fun building and leave you to figure out the hard leg work. In the next steps I am going to walk you though how I built my application.
Step 6: Credit
Not really a step but I want to list my sources and inspiration for this tutorial.
This Github ReadMe was written by a good friend while working on our senior design project and it has served for a lot of inspiration as to how to create my site.
https://github.com/SDP-DT04/Web-Application/blob/m...
This tutorial was a helpful tool in the process of making a web application.
http://kroltech.com/2013/12/29/boilerplate-web-app...
For more information on a node.js site visit my Part 2.
