Build a Hello World App Using TypeScript

In this example, we will build a simple products service with a “hello world” endpoint using TypeScript.

Starting from scratch is fun, but we can let a framework do most of the heavy lifting for us. We will be using Litstack to get our web service up and running quickly.

Setup

Download the boilerplate

Make sure you have node and git installed and run the following commands in your terminal:

$ git clone https://github.com/codyjdalton/litstack-seed my-service
$ cd my-service
$ npm i

You now have a folder called my-service with a new web service seed project.

Running the app

Let’s fire it up and see what we get out of the box:

$ npm start

You will see a welcome message in the console:

Our service is up and running. In a browser tab, go to:

http://localhost:3000/

To stop the application use Ctrl + C

Pro-tip: Use a chrome plugin like JSON Formatter to make responses more readable in the browser.

Add an endpoint

For this example, we will be serving a list of products to the consumer. It will include name and price, and can be limited with a simple query parameter.

Create the products directory

In VS Code, create a new directory in the modules folder called products.

Create the products module

Inside our products directory, create a new file named products.module.ts.

Add the following code to the products.module.ts file:

In the above file, we are exporting a class called ProductsModule. We can import and use Litstack’s LitModule decorator to pass it the path. We want our path to be /products so we can use ‘products’ as the value.

Import the products module into the app module

In order for our new module to be included in our service, we’ll need to import into the app.module.

Update app.module to include our new products module:

Create the products component

In order to return a response at /products, we will need to create a new products component. First, let’s create a new directory under products called components

In our new components directory, create a two files, products.component.ts and products.component.spec.ts:

We will import our component into the products module later on

We will add some placeholder code to our products.component for now:

Export the products component

We’ll want to export our products component in our products.module:

Create the products spec

We don’t want to write untested endpoints, so let’s write our tests first. We will start small with a simple hello world.

In our products.component.spec file, add the following code:

The above is running the following tests:

1. Our endpoint returns 200 response code
2. Our message is Hello World!

Running tests

Let’s see if our endpoint is responding as expected by running:

$ npm test

We will get a failing test, because our endpoint doesn’t exist yet.

Add the get products endpoint

We want to return the expected message from out test. Use a GetMapping and return a successful response.

Also available are PostMapping, PutMapping, etc

The getProducts method above uses a GetMapping to serve GET requests at the parent module’s path.

Let’s run our tests again and we should get a success:

$ npm test

Hello world

We’ll want to restart our application with:

$ npm start

Visit in a browser tab:
http://localhost:3000/products

Want to learn more?

https://www.codydalton.me/