This source code repo is a sample app showing how to do the simplest possible web server app in NodeJS.
It's mean to be a learning exercise, and demonstrate this amazing web technology. JavaScript is the primary language of web frontend, and it can be on the backend as well.
You can be a fullstack web developer by knowing JavaScript well.
There are a few one-time only steps for installing pre-requisites listed below.
This sample webapp is written using NodeJS. Running it means having the NodeJS run-time setup on your computer. Never installed NodeJS? No problem. Refer to the Node Foundation and find an installer matching your O/S.
Take a copy of the source code from the repo on GitHub. Looking at this sample app repo you’ll find the green button labeled “clone”. Clicking it reveals the URL you’ll use to git clone, which is how source code is first copied down from the server to your computer.
I'm assuming you're familiar with git revision control. If you haven't used it much there's a ton of resources online that you can search for. It's worth getting comfortable with it!
To summarize.
- You’ve installed NodeJS
- You've pulled down a copy of the source code
Now install the app’s dependencies. Run this command in your local copy of the repo:
npm install
This tells npm (Node Package Manager) to pull down copies of the open-source libraries this app uses. Could take a few minutes.
Your copy of the app is ready to run. Run this command in your local copy of the repo:
npm start
Launch your favorite web browser and enter the URL your local web server is running on with one of the two routes that it offers:
http://127.0.0.1:3000/
http://127.0.0.1:3000/hello
Each is slightly different. Why? Simply show how that's done. Most every webserver you've ever seen has more than one route.
Start at the beginning, app.js, and notice how the NodeJS web server is spun up and gets working. This function SetupRoutes is particularly interesting because it calls helper functions setting up the GET action response for the default route.
Request handlers are implemented in site.js. Each sends back an HTML response generated by rendering through Handlebars template engine for ExpressJS.
Look at main.html seeing how to setup a page for the template engine to work.
ExpressJS is a library for setting up a webserver. NodeJS is simply a JavaScript run-time interpreter. We want to use it for making a webserver and Express is key for setting up HTTP.
You'll see the app's webpage has a little bit of style. You'll notice styles are defined in main.css. In fact public is a special folder for static resources served up by pages. You'll see that established in the SetupParsingPublic function in app.js.
As you read through hello.html you'll notice it's something special. It takes data from the function rendering it and substitutes that data inline using the Handlebars Expressions syntax like this: {{whenRendered}}.
I use this during development to run the app:
npm run watch
This script leverages a library called nodemon and tightens up the design -> build -> test loop by watching for source code file changes. Nodemon restarts the app while you're editing and saving files.
Automation tools like this makes software development a little bit easier.
Where is that script defined? Because it's related to npm it'll be found in package.json. The definition file that makes npm work for your project.
Use this sample app to accelerate your learning. Play around in it. Change things. Make it your own. It should be enough to get your inventive self going strong.
Be sure to reach out to me on Twitter and tell me when you've done something cool.
Good luck, have fun!