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.
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.
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.