Build Your First Local Server and Web App With Node.js
How to set up a local server and start running your app with Node.js
In this brief tutorial, you will learn how to set up a local server with Node.js. By the end, you’ll be able to run a basic app version on your own virtual server.
Let’s get started! 🚀
Why Do You Need a Web Server and What Is It Anyway?
A virtual web server runs on your own computer with the use of server software. If you’re an aspiring developer you’ll most definitely want to set one up, as it allows you to test the features of any web application that you’ve built.
Imagine uploading your website or app for the world to see without testing it online. There wouldn’t be any way to be sure if it works fine for other users. Sounds bad, right? So, it’s good practice to always check how the features you’ve created work when accessing your site online.
It’s safe to say that Node is the best choice when building a simple server for all kind of web apps. So let’s install it. Let’s look at two ways, one quick method of installing and another option that’s a bit more complex at first but later on much more convenient.
(1) A Quick Way to Install Node.js
- Go to the official page of Node.js and download the install package for your operating system. Use the LTS version, not the current one.
- After the download is complete install the package like any other app on your Mac or PC
- Next, you can go to your Terminal program of choice. In case you don’t have a Terminal app like iTerm2 or Hyper installed, simply open the Terminal that comes pre-installed on every Mac. If you are a Windows user, check here.
- You can type the following command into your Terminal to see if everything was installed correctly:
$ node -v. If it works fine you should see a Node version number now. Also, check if
npmwas installed with
$ npm -v.
Npmis the Node Package Manager that comes with Node when being installed. We will use it in the next steps to install Express and start our virtual server.
(2) A better way to install Node.js
Instead of the above-described way, I prefer using Homebrew, which is a package manager for macOS. It allows you to install missing apps super fast via the Terminal. Windows users must take another package manager like Scoop instead. They are pretty similar and for demonstration purposes, I will show you how to install Node via Homebrew.
- Again, \go to the Terminal and paste the following prompt (without the $-sign) in there. In case you’re wondering: it simply checks the GitHub repository from Homebrew and installs the app from there.
$ /usr/bin/ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)
- If Homebrew was installed correctly, we will be ready now to install Node with this simple command:
$ brew install node
- You can check if everything is looking good by typing in:
$ node -vand
$ npm -v(which should give you the version number of your installed Node).
But why make this effort to install Node via a package manager like Homebrew? There are several reasons this is a good idea:
- If you are using Node’s install manager it is possible that you run into access issues that require you to make changes in your system using a command called
- Also if you ever want to uninstall without Node this will be very messy as you need to track all the files that were created.
- Lastly, also it’s much easier to keep your Node version up-to-date when using Homebrew.
Set Up Your First App
You’re still with me, right? Great, so let’s finally go on and build an actual web app and local server!
To do this quite conveniently we can use the
express-generator, which is a great command-line tool that creates an application skeleton for us. Otherwise, you would be required to write more advanced code like setting up a server instance, configuring a view engine, etc. Although this is great to know, it will not be necessary to run your first app on a web server.
Express-generator is straightforward. Simply take the following command and hack it into your terminal:
$ npm install express-generator -g. With the
-g we install Express globally which means that you can access the package from any directory.
While still on the Terminal you can now create a new app with
express-generator by typing:
$ express -v ejs -c sass myapp. In this example,
myapp will be the name of your project. And guess what? You have just built your first app! To visit the
myapp directory that we’ve just created, you can type
$ cd myapp.
Admire the App You’ve Just Built
Take a look at the
myapp project that you have just created. To see your files in the code editor just use this line:
$ code . while still being in the
myapp folder on your Terminal.
For this to work, you must, of course, have installed a code editor like Visual Studio Code or Atom.
When opening the editor you can see the project and all the files that were automatically created for you with Express generator. Within
index.ejs, you can make edits and build your complex web app from there. For now, let’s just leave it as is and continue to build our server.
We are almost there.
Last thing: we must install various additional third-party packages (which are listed as dependencies in the
package.json file). These are commonly required by Express to run the server as you would expect it. Good news is that this will be pretty easy as you can install all of these via
npm at once. Open up your Terminal and use this prompt:
$ npm install. You can check if your installation was successful by going into your code editor again. You will see a new folder called
node_modules like in my example above (hint: exclude this in case your uploading to GitHub).
Start Your App on a Virtual Web Server
Finally, let us run our app on a web server. Most of what’s necessary was already done in previous steps! Two simple steps and you are there:
- While in the Terminal, prompt this command:
$ npm start. This will start a virtual server.
- Go to the address bar of your internet browser and type
localhost:3000. Localhost is a top-level-domain (TLD) just like .com or .org. However, it’s reserved for documentation and testing purpose. With
:3000you call the default port to access the newly built server.
Where to go from here
Congrats! You have created your first app and ran it on your own server. From here you could start building your custom app. The app skeleton is already setup in a way that allows you to build your site within the
index.ejs. If you want to build anything more advanced than a simple site you should consider using partials. It means that you build your app in components that you can reference from your
index.ejs. Conveniently, we have already installed the view engine EJS that will help you while building specific parts of your app in components.
Thank you for reading. I really hope you found this tutorial helpful.