By Sam Thomas — May 19, 2019

Managing your own services - Part 0: Writing a simple application using express

Hi! This is a planned series of posts that will cover getting up and running with your own VPS on DigitalOcean or a similar hosting provider. I hope it helps you out! We will start at the beginning - creating a service that we will then turn into a website!

To get the most out of this series, you should have an underlying familiarity with javascript, node (the environment that allows javascript to run on the server), and express (the framework that allows us to easily run web servers using node).

You should have git & node installed on your computer for this tutorial. If you haven’t install them, download them below:

Install node:
Node.js
Install git:
Git - Downloading Package

If you already have your own git-versioned server, or have a git-versioned server written in a different language, feel free to skip over this part and go to Part 1.

This is going to be a simple server - we just want to have a server that will respond to us when we visit localhost:3000 on our machines.

Start by opening our terminal app and creating a new folder,
my-vps-app.

In your terminal:

type mkdir my-vps-app and press enter.

This command makes a new folder titled my-vps-app in you home directory (if you haven’t changed directories)

To save myself from having to type type …. and press enter over and over, from here on out I’ll just call that running a command in my terminal.

In your terminal:

Run cd ./my-vps-app to cd into our folder. Next,
Run git init, and then
Run npm init

npm init will prompt you with a list of configuration questions — you should just press enter to go with the default responses, which are fine for a simple demonstration app.

Screen-Shot-2019-02-24-at-12.51.38-PM

Running git init initializes a bare git repo for us, which will allow us to manage our codebase versions as we add code to it. npm init created a package.json file for your repository, which is where the configuration file where npm stores things like dependencies, scripts, and information about the author (you!) and the project itself.

Now that our project is setup in a mostly empty state, let’s create an index.js file. This will serve as our simple server.

In your terminal:

Run touch index.js

If you run ls now, you will see that you have created an index.js file.

We also want to create a static index.html file this server will serve, so let’s create that too.

In your terminal:

Run touch index.html

If you run ls in your terminal after that, your directory should look like mine below, with the index.hmtl file, the index.js file and the package.json file.

Screen-Shot-2019-02-24-at-1.11.38-PM

So, now we need to actually write those files. Using your favorite text editor, open your index.html file and copy and paste the below code, and then save your file:

//copy below this line
<html>
        <head>
                <title>webpage</title>
        </head>
        <body>
                <div>this is the body of a webpage</div>
        </body>
</html>
//stop copying above this line

Now do the same with the below code in your index.js file

//  copy below this line
//  require in our dependencies, express & path
const express = require(`express`)
const path = require('path')
//  Create our express server
const app = express()

//  for every GET request on every route,
//	  respond with our index HTML file
app.get(`*`, function (request, response) {
  response.sendFile(path.resolve(__dirname, `index.html`))
})

//  listen on port 3000
app.listen(3000)

//  log that we are listening on port 3000
console.log(`listening on 3000`)

//stop copying above this line

Now that we’ve saved both those files, we need to install express, the framework that this project uses to run its web server.

In your terminal, in the root of the project directory, my-vps-app,:

Run npm install express

This will install express and allow us to use it within this project. Now, we’re ready to start our web server!

In your terminal, n the root directory of the project,:

Run node .

This will start your server listening on port 3000 (to exit the node process in the terminal, press ctrl + c).

[image:2B3758DB-1387-4423-9C2D-1B5F27B16EC6-63377-0000EE5108DBA086/Screen Shot 2019-02-24 at 1.13.08 PM.png]

Now, in your browser of choice, navigate to localhost:3000 and you should see the index.html we just wrote being served!

[image:136BB0D8-B918-41CF-A90C-62FE5BE8F4E9-63377-0000EDFCAF9A9A96/Screen Shot 2019-02-24 at 1.07.05 PM.png]

Sweet! Let’s go back to the terminal, and end the server process. Now that we’ve got our a working server, we want to commit this code into our git history. First, though, we want to tell our git history to exclude our node_modules folder. Saving node_modules to a git repository isn’t necessary, since the code can be installed by other people using our project in an install step we will add later. To add these exclusions to our git repository, we need to create a .gitignore file and tell it to ignore the folder.

In your terminal:

Run echo "node_modules" >> .gitignore in the project root directory.

Now, we’ll want to commit our code to save it to the git repo,
In your terminal:

Run git add . && git commit -a -m "initial commit".

You should see the below when you run the command.

[image:8AC5F12A-CD24-4769-BBFF-59882945180C-63377-0000EECEF4F74C60/Screen Shot 2019-02-24 at 1.22.11 PM.png]

And we’re done! Wooo!

To recap:

* We’ve written a server and it’s serving our static content!
* We’re using git for version control
* We’re using npm to manage our project

This is a great start! But the server is only running locally. That’s fun, but not /that/ fun. You won’t be able to show this webpage to your friends or family. So you’ll need to host it somewhere. And that’s where cloud hosting comes in - we’ll cover getting that set up in Part 1.

To recap:

Subscribe to sam thomas dot io