Code Monkey home page Code Monkey logo

express-typescript-skeleton-boilerplate's Introduction

Description of the project

Today we will integrate Typescript with our NodeJS boilerplate. If you are interested on how to setup Typescript with NodeJS then you can refer to the following articles

https://www.mohammadfaisal.dev/blog/create-nodejs-typescript-boilerplate

Get the NodeJS boilerplate

Let's first clone the boilerplate repository where we have a working NodeJS application with Typescript, EsLint and Prettier already set up. We will integrate Express on top of this

git clone https://github.com/Mohammad-Faisal/nodejs-typescript-skeleton.git

Install the dependencies

Then go inside the project and install the dependencies

cd nodejs-typescript-skeleton
yarn add express

And also the type definitions for the express module

yarn add -D @types/express

Test it out!

Go inside the src/index.ts file and import the dependencies and create a basic express application

import express, { Application, Request, Response } from 'express';

const app: Application = express();

Then let's create a basic route that will except a GET request and return a result

app.get('/', async (req: Request, res: Response): Promise<Response> => {
  return res.status(200).send({
    message: 'Hello World!',
  });
});

Then start the server on port 3000;

const PORT = 3000;

try {
  app.listen(PORT, (): void => {
    console.log(`Connected successfully on port ${PORT}`);
  });
} catch (error: any) {
  console.error(`Error occured: ${error.message}`);
}

And then run the application

yarn dev

Go ahead and hit the following URL http://localhost:3000/ and you should be greeted with the following response

{ "message": "Hello World!" }

Add Bodyparser

Now this is the bare minimum to get started with Express. But in real life we need a couple of things to get the server working properly.

to handle HTTP POST requests in express we need to install a middleware module body-parser

Let's install it first

yarn add body-parser
yarn add -D @types/body-parser

Then use it inside the index.ts file

import bodyParser from 'body-parser';

const app: Application = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

And add another route to handle HTTP POST requests

app.post('/post', async (req: Request, res: Response): Promise<Response> => {
  console.log(req.body);
  return res.status(200).send({
    message: 'Hello World from post!',
  });
});

You will notice that inside the route handler we can get the body of the request by

req.body;

It's possible because of the use of body-parser

That's it! Hope you learned something new.

express-typescript-skeleton-boilerplate's People

Contributors

mohammad-faisal avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.