Basic Express Server Setup with TypeScript
Lesson 1
Welcome to the very first lesson of our Crypto Portfolio Tracker app tutorial! Today, we will learn how to set up a primary server using Express with some help from TypeScript.
Why Are We Using Express, TypeScript, ts-node, and Nodemon?
Express is like a fast helper for building websites and apps. It doesn't have many rules, so you can be creative and make your app just how you want it. It's great for setting up your app to send and receive information online.
TypeScript is like an upgraded version of JavaScript (which is the language of the web). It helps us catch mistakes before they happen, making our code cleaner and our lives easier.
ts-node is a tool that uses Node.js to let you run TypeScript code immediately. It changes TypeScript into JavaScript on the fly, so you don't have to compile your code before running it. It hooks into Node.js's way of loading modules, which means it fits in smoothly with all the other tools and libraries you use in Node.js.
nodemon is like a lookout. It watches our code as we write and automatically updates our project, so we don't have to stop and start it constantly.
Setting Up and Exploring Express with TypeScript
Express simplifies web application and API development with easy request and response handling, routing, and middleware integration features. TypeScript provides the added benefit of type safety, improving reliability and maintainability.
Key Concepts:
Routing: Directing requests to the correct handlers.
Middleware: Functions that process requests before they reach your routes.
Type Definitions: Ensuring data types are correctly managed in TypeScript.
Creating and Running Your Server
Initial Setup: Assuming you've created your crypto-tracker-backend folder and installed Express and TypeScript.
Server Setup: In the src directory, create a server.ts file to house your server code:
import express, { Application, Request, Response, NextFunction } from "express";
const app: Application = express();
const port = 3000;
// Middleware example
const loggingMiddleware = (req: Request, res: Response, next: NextFunction) => {
console.log(`Request received: ${req.method} - ${req.path}`);
next(); // Move on to the next middleware or route handler
};
app.use(loggingMiddleware);
app.get("/", (req: Request, res: Response) => {
res.send("Hello World");
});
app.listen(port, () => {
console.log(`Server is running at http://localhost:${port}`);
});This includes a simple middleware example that logs the type of HTTP request and path accessed.
Development Automation: In package.json, add a start script for Nodemon:
"start": "nodemon --exec ts-node src/server.ts"Starting your server with npm start will also utilize ts-node and Nodemon for automatic restarts upon code changes.
Testing Your Server
Verify that by accessing http://localhost:3000 in a browser, you should see "Hello, World!" and that your terminal should display the log from your middleware.
Summary
You've added an Express server to your project, enhanced with TypeScript for improved safety and manageability. Including middleware demonstrates how to preprocess requests, vital for building more complex functionality in future lessons.
Last updated