Aluko Opeyemi Folajimi
Aluko Fola

Aluko Fola

How to Setup a simple nodejs and Typescript Web App

Aluko Opeyemi Folajimi's photo
Aluko Opeyemi Folajimi
·May 21, 2022·

3 min read

How to Setup a simple nodejs and Typescript Web App

Photo by Radek Grzybowski on Unsplash

mkdir node-typescript && cd node-typescript && code .

Run the above code in your terminal/command prompt to be able to create a folder called node-typescript.

Note that, for windows OS, you need to run each commandshift one after the other,starting with mkdir node-typescript ,then cd node-typescript,then code .The above syntax is only applicable in bash environment(Linux and MacOs)

The above command should open visual studio code editor for you, if you don't have one, you can get it from Visual studio code homepage

So in the visual studio code, > Press Ctrl +shift +` or CMD + shift + p then type terminal to open the terminal. Type to below initialize your node project,it would create a package.json file for you

npm init -y

The screenshot below describes shows the content of the package.json file hash.png

Now, to the typescript session , run the following command to install typescript to your package.json file and keep in the devDependencies and also install ts-node so as to be able access typescript for node globally

npm i typescript --save-dev && npm install -g ts-node

After installing your typescript, we need to configure it for our app, hence run the code below, a file called tsconfig.json would be created Note npx is a package installer from npm,It allows us to run packages without having to install them globally.

npx tsc --init

Delete everything inside the tsconfig.json and copy the below code into the tsconfig.json file.If you would need a tutorial on how to set up tsconfig file for your typescript app,let me know in the comment section

{
  "compilerOptions": {
    "target": "es5",                                
    "module": "commonjs",                               
    "rootDir":"src/",
    "resolveJsonModule": true,                        
    "allowJs": true,    
    "lib":["ES6"],            
    "outDir": "build/",                                  
    "esModuleInterop": true,                  
    "strict": true,                                     
    "noImplicitAny": true,         
    "skipLibCheck": true ,
    "typeRoots": [
      "./@types",
      "./node_modules/@types"
    ]                          
  }
}

So to continue with our app, let install some packages needed

npm i express  -s && npm i --save-dev @types/express  nodemon

create a new file and call it app.ts and write out the command below

//Imports
import express, {Application,Request,Response} from "express";

// Initialising app
const app: Application = express();

//Defining our Port
const PORT : any = process.env.PORT || 4000

// Middlewares
app.use(express.json())


// Server setup
app.listen(PORT,()=>console.log(`Server listening on port ${PORT}`))

//Routes

app.get('/',(req:Request,res:Response)=>{
    res.json({message:"Hi Welcome to Nodejs-Typescript Tutorial with Aluko Opeyemi"})
})

Explanation: We started by importing the express and destructured libraries from the express package we installed earlier. Note that the three destructured libraries are pre-defined types from express package used at strategic position Then, we initialize our express app by creating a variable app with type Application and holding the express function.

We then define the port for the server to listen to. For simplicity sake, we defined only a middleware, then we configured our sever on the port we intended to run on. After that we configure a route to follow

And finally, configure your package.json file as shown below so as to be able to run the app.ts file,

{
  "name": "node-typescript",
  "version": "1.0.0",
  "description": "",
  "main": "app.ts",
  "scripts": {
    "start:dev": "nodemon app.ts"
  },
  "license": "ISC",
  "devDependencies": {
    "@types/express": "^4.17.13",
    "nodemon": "^2.0.16",
    "typescript": "^4.6.4"
  },
  "dependencies": {
    "express": "^4.18.1"
  }
}

Now run the command below in your terminal

npm run start:dev

The following message should be displayed in your terminal

.
.
.
[nodemon] 2.0.16
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: ts,json
[nodemon] starting `ts-node app.ts`
Server listening on port 4000

Then you can go to any browser of your choice and navigate to localhost:4000.The output screen should be like below

Screenshot from 2022-05-21 22-49-42.png

Yippie, you just got your server running...Let me know if you have any question in the comment session below or you can send me a mail on

 
Share this