Creating a “hello world” with Express and typescript
Creating a hello world with typescript and express If you’re new to the world of web development, chances are you’ve heard of typescript and Express.js. Typescript is a superset typed JavaScript that brings more security and scalability to JavaScript code, while Express.js is a popular framework for building web applications and APIs with Node.js. In this tutorial, we will create a simple “Hello World” using these two technologies. Pre requirements Before we get started, make sure you have Node.js and npm installed on your system. You can download and install the latest version of Node.js from nodejs.org. Step 1: Configuring the development environment First, let’s create a new directory for our project and navigate to it: mkdir hello-world cd hello-world Then, initialize a new Node.js project by running the following command: npm init -y This command creates a ‘package.json’ file with the default settings for your project. Step 2: Installing the dependencies Now, we need to install the necessary dependencies for our project, including Express.js and typescript. Run the following command to install these dependencies: npm install express typescript @types/express Express.js: This is the framework we will use to handle HTTP routes and requests. Typescript: It is the language we will use to write our code. @types/express: These are the type definitions for Express.js, allowing us to write Express-compatible typescript code. Step 3: Configuring typescript Let’s create a configuration file for typescript called ‘tsconfig.json’. This file contains the configuration options for the typescript compiler. Run the following command to create this file: npx tsc –init Then open the file ‘tsconfig.json’ and make the following changes: { "compilerOptions": { "target": "es6", "module": "commonjs", "outDir": "./dist", "rootDir": "./src", "strict": true } } These options configure typescript to compile our code to the ‘dist’ directory and enable strict type checks. Step 4: Writing the code Now it’s time to write our code. Create a file called index.ts at the root of your project and add the following code: import express from 'express'; const app = express(); const port = 3000; app.get('/', (req, res) => { res.send('Hello, World!'); }); app.listen(port, () => { console.log(`Server is running at http://localhost:${port}`); }); This code creates an Express server that listens on port 3000 and responds with “Hello World!” when we access the root route (‘/’). Step 5: Compiling and running the code Now that our code is written, we need to compile it to JavaScript and run it. Run the following command to compile the typescript code: npx tsc This will compile the typescript code into JavaScript and place it in the dist directory. Finally, execute or follow the command to start or server: node dist/index.js You can now open your browser and go to ‘http://localhost:3000’ to see the “Hello World!” being displayed. Conclusion In this tutorial, you learned how to create a simple “Hello World” using typescript and Express.js. You set up the development environment, installed the required dependencies, configured the typescript, wrote the code, and ran the server. This is just the beginning, and you can expand this project by adding more functionality as you learn about APIs.