read24 - Server: Dev Environment Setup

July 2, 2020

Roger Ngo

Our first step in implementing the read24 application is to set up the repository, and project.

The project will be will be under GitHub for source control. I will be creating a repository urbanspr1nter/read24 as a public repository, with a Node .gitignore file.

Repository

Yay, easy enough. Now clone the repository using git clone. After navigating to the cloned project, the client, and server folders are created.

So far, this is the project structure:

/
-- client/
-- server/
-- README.md
-- LICENSE

It makes sense to start creating the server application first. Since there is an API in which I will eventually implement, I will be using express to handle routing, and basic serving of pages through HTTP.

Initialize the project as an nodejs project through npm init, and then install express.

npm init
npm install express --save

I also want to try implementing everything in TypeScript, and that will be installed too.

npm install typescript --save-dev

Since TypeScript is now supported in this project, I am interested in knowing the type definition for express. Therefore, installing @types/express is what I will need to get that.

npm install @types/express --save-dev

Now that I have the basic development dependencies installed, I will create a quick server program for testing. Create an index.ts file under a new directory called src. Here is what the file contents consists of:

import * as express from 'express';

const app = express();

app.get('/ping', (req, res) => {
    res.status(200).send('pong');
});

app.listen(3000, () => {
    console.log('It works!');
});

As you can see, a single route, ping will be exposed. The response pong will be returned by default.

Time to test this. First, the TypeScript index.ts file must transpiled to js. I will need to write a script in the package.json that will do that.

First, tsconfig.json must be created, and configured with the proper parameters. I have followed this documentation: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html

{
    "compilerOptions": {
        "module": "commonjs",
        "removeComments": true,
        "outDir": "dist"
    },
    "include": [
        "src/**/*"
    ],
    "exclude": [
        "node_modules"
    ]
}

Important things regarding the above:

This will be good enough for now.

Then edit package.json to include the following scripts:

  "scripts": {
    "build": "tsc",
    "start": "npm run build && node dist/index.js"
  },

npm run start for now will always build first, and then run the server. I plan to get a little fancy later once there is a need for that.‌

Now testing for sure! npm run start should build and start index.ts.

Rogers-MacBook-Pro:server rogerngo$ npm run start

> read24-server@1.0.0 start /Users/rogerngo/Dropbox/CodeRepo/read24/server
> npm run build && node dist/index.js


> read24-server@1.0.0 build /Users/rogerngo/Dropbox/CodeRepo/read24/server
> tsc

It works!

Let's make a request to localhost:3000/ping

GET /ping HTTP/1.1
Host: localhost:3000
Connection: keep-alive
Cache-Control: max-age=0
DNT: 1
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
Sec-Fetch-Site: none
Sec-Fetch-Mode: navigate
Sec-Fetch-User: ?1
Sec-Fetch-Dest: document
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Cookie: _ga=GA1.1.826679214.1593128357; io=Lwn5PvZ374kEmNk5AAAF
If-None-Match: W/"4-DlFKBmK8tp3IY5U9HOJuPUDoGoc"

The response is received:

HTTP/1.1 200 OK
X-Powered-By: Express
Date: Thu, 02 Jul 2020 16:58:24 GMT
Content-Type: text/html; charset=utf-8
Content-Length: 4
ETag: W/"4-DlFKBmK8tp3IY5U9HOJuPUDoGoc"

pong

Yay! I'm in business now! Small steps for some confidence! 😎‌

Now I'll commit my changes, and push to the git repository. Putting trust in the .gitignore file, I should be able to run these commands and push only the required files I would want for source control:

git add .
git commit -m "Setting up the server project"
git push

Looks good.

Rogers-MacBook-Pro:server rogerngo$ git push
Enumerating objects: 9, done.
Counting objects: 100% (9/9), done.
Delta compression using up to 8 threads
Compressing objects: 100% (7/7), done.
Writing objects: 100% (8/8), 6.22 KiB | 6.22 MiB/s, done.
Total 8 (delta 1), reused 0 (delta 0)
remote: Resolving deltas: 100% (1/1), completed with 1 local object.
To https://github.com/urbanspr1nter/read24.git
   55ad7ca..d599621  master -> master
Rogers-MacBook-Pro:server rogerngo$