In this brief tutorial you will learn how to setup 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! 🚀
A virtual web server runs on your own computer with use of server software. If you’re an aspiring developer you will most definetly like this because it allows you to test features of any web application that you’ve build.
Imagine you would upload your website or app for the world to see without testing it online. You couldn’t be sure if it works fine for other users. That’s no good, right? So, it’s good practice to always check how the features you’ve created work when accessing your site online.
It’s save to say that Node is the best choice when building a simple server for all kind of web apps. So let’s install it. I will tell you two ways, one quick way to install and another option that’s a bit more complex at first but later on much more convenient.
$ node -v. If it works fine you should see a Node version number now. Also check if npm was installed with
$ npm -v. Npm is 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.
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 go with Homebrew and show you how to install Node via Homebrew.
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
$ brew install node
$ 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:
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 build your first app! To check into the myapp directory that we’ve just created you can type
$ cd myapp.
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 the 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.
Setup of express-generator within the code editor
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).
Finally let us run our app on a web server. And the very most of what’s necessary was already done in prevoius steps! Two simple steps and you are there:
$ npm start. This will start a virtual server.
localhost:3000. Localhost is a top-level-domain (TLD) just like .com or .org. However, it’s reserved for documentation and testing purpose. With :3000 you call the default port to access the newly build server.
Welcome screen on your local server once the Express app is running
Congrats! You have created your first app and actually run 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. In case you like 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 this far. I really hope you found this tutorial helpful.
Please share, comment, and press/hold that 👏 a few times (up to 50 times). I like to keep doing these tutorials if there is interest from you!