Source code that builds locally into a Node.js Hello World webapp

08 Mar 2023 🔖 web development minimum viable build beginner
💬 EN

Let’s take a look at the smallest Node.js website you can easily run on your local computer.

See the sample codebase on GitHub.

Prerequisites

1. You must have Node.js installed onto your local computer.
   • If you do not have Node.js version #18 installed onto your local computer:
     • The most reliable way to ensure you can run my sample codebase is to install version #18 onto your computer.
     • However, you can probably also get away with simply changing the version number found in the /.nvmrc file of my sample codebase once you’ve downloaded a copy of it to your local computer.
2. You must have Node Package Manager (“NPM”) installed onto your local computer.
3. You must download a copy of my sample codebase onto your local computer.
4. Using a command line interface – ensuring first that its prompt indicates that your commands will be running within the context of the folder into which you downloaded a copy of my sample codebase – you must run the following command:

    npm install
   

The npm install command will take about a minute to execute.

It will add a new subfolder and a new file to the folder on your computer containing a copy of my sample codebase:

1. A /node_modules/ folder (important)
2. A /package-lock.json file (unnecessary for this exercise but not hurting anything).

Building source code into a runtime

Open up a command line interface.

Ensure that its prompt indicates that your commands will be running within the context of the folder into which you downloaded a copy of my sample codebase.

Run the following command:

npm run build

The npm run build command will take about a minute or two to execute.

It will add a new subfolder called /dist/ into the folder on your computer containing a copy of my sample codebase.

If you open up the new /dist/ folder, you’ll see that its file structure looks like this:

dist/
├─ node_modules/
│  ├─ ...a lot of folders...
│  ├─ ...but not as many as in the other node_modules folder...
│  ├─ ...for example, none called `/dist/node_modules/shx/`...
│  ├─ ...even though there is a `/node_modules/shx` in the other /node_modules/ folder...
│  ├─ ...don't worry, this is on purpose...
│  └─ .package-lock.json
└─ server.js

Yes, in addition to containing a copy of server.js, /dist/ also contains yet another /node_modules/ folder. Interestingly, it is not just a copy of the other /node_modules/ folder you made earlier.

The /node_modules/ folder up in the “root” of the folder on your computer containing a copy of my sample codebase lets you, the human, successfully run commands like npm run build.

The one inside of /dist/ is more stripped-down and contains only what a server would need to actually run your Hello World webapp that you just built.

Congratulations – you have now built an executable “runtime” for Node.js that, when executed, will behave as a web server.

The entirety of your “runtime” that you just built lives in the /dist/ folder.

Anything above the /dist/ folder has nothing to do with making your actual webserver run. It’s all there for your convenience as a human.

Running your web server

Open up a command line interface.

Ensure that its prompt indicates that your commands will be running within the context of the folder into which you downloaded a copy of my sample codebase.

Run the following command:

node ./dist/server.js

• WARNING: Do not close the command line just yet or it will be difficult to stop your web server later in this exercise.

Unless you happen to have already manually set an environment variable named “PORT” on your local computer to some number, the output you will see will say:

Example app listening on port 3000

If PORT is an environment variable with a value on your local computer, you’ll see that number instead of “3000.”

Visiting your website

Open a web browser and navigate to http://localhost:3000.

• Note: If your startup gave you another number besides 3000, replace the 3000 in my URL with your number instead when visiting a URL in your browser.

Take a look in the upper-left corner of the webpage you just visited: it should say “Hello World!”

Stopping your web server

Go back to the command line interface from which you ran node ./dist/server.js.

Hold Ctrl and hit c, then release them both.

Your command line interface should return to a standard prompt indicating that your next command will be running within the context of the folder into which you downloaded a copy of my sample codebase.

Credits

• Express.js official documentation
• Abel Lifaefi Mbula’s How to Setup a Minimal Node.js Server
• Marcus Lyons for confirming to me that a Node.js webserver “runtime” can consist of as little as:
  • The JavaScript file that actually has code in it purporting to do webserver-ey things (like listen for HTTP traffic on a network port).
  • The node_modules folder that results from running npm install --production against a package.json with a dependencies property referring to things such as Express.js that your handwritten JavaScript file depends upon at runtime (in this case, it wouldn’t really know how to “do webserver-ey things” if Express.js weren’t telling it how).
• RobC on StackOverflow pointing out the shx package for ensuring I can copy files equally well via a package.json build script whether running on Windows or Linux.

Posts in this series