Build Your First TypeScript Express App in Under a Minute!

Developing a TypeScript application can be a daunting task with numerous configurations and setups. However, with the magic of the Just, we can simplify the process significantly.

In this article, we'll walk through setting up a simple "Hello World" Express app using TypeScript. This setup reloads the server on file changes and seamlessly handles environment variables, all with zero configuration.

Note: In this guide, we are using Express; however, it's important to highlight that Just works seamlessly with any Node.js framework. So, whether you're using Express, Koa, or another Node.js framework, you can still benefit from the power and simplicity of Just.

Let's dive in and discover how Just can transform your development workflow, making it more efficient and enjoyable.

Prerequisites

Before we dive into the tutorial, make sure you have Node.js and npm (Node Package Manager) installed on your machine. You can download them from the official website: Node.js Downloads.

Let's Get Started

Step 1 - Create a Project Directory

Let's start by creating a new directory for our project. This will be our workspace where all the magic happens.

mkdir hello-world

Step 2 - Initialize npm Package

Navigate into the "hello-world" directory:

cd hello-world

Now, let's initialize an npm package by running:

npm init -y

This command will generate a package.json file with default values for your project.

Step 3 - Install Express.js

It is time to install the Express framework.

npm install express

Additionally, this is not necessary but you might want to install type definitions for Express by running:

npm install --save-dev @types/express

This will add Express type definitions to your project, enabling TypeScript to provide better code completion and type checking.

Step 4 - Create a Simple Hello World File

Time to write some code!

Let's create a simple Express server file using TypeScript. In your project directory, create a file named index.ts. You can use any code editor of your choice to create and edit this file.

In index.ts, add the following snippet:

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 on http://localhost:${port}`);
});

This code sets up a basic Express server that listens on port 3000 and responds with "Hello, World!" when you access the root URL.

Step 5 - Install Just

Now, it's time to introduce Just, a powerful tool that simplifies development with TypeScript and Node.js. Install it as a development dependency by running:

npm install --save-dev @sonnyt/just

Step 6 - Profit!

Believe it or not, you're done! The setup is complete, and you're ready to run your code.

To start your server, run the following command:

npx just dev index.ts

The magic of Just comes into play here. It will compile your TypeScript code and automatically reload the server whenever you make changes to your files.

Optional: If no entry file path is provided, Just automatically falls back to using the entry point defined in the package.json "main" property. If you configure the package.json "main" property to point to index.ts you can omit the index.ts entry path when running the dev command.

Handling Environment Variables

You can define your environment variables in a .env file in your project's root directory, and Just will automatically load these variables and make them available in your application. This simplifies the management of sensitive information and configuration settings in your application.

# Example .env file
API_KEY=your_api_key
DATABASE_URL=mongodb://localhost/myapp

Compiling Code For Deployment

To compile your TypeScript code and ensure it's ready for deployment, simply run the following command:

npx just build

This command will compile your TypeScript code and place the resulting files in the dist directory.

During the build process Just will also copy all non-compilable static files in your working directory into the output directory.

Note: If you prefer to have your output files in a directory other than dist, Just provides a handy option to specify your own output directory using the --out-dir option.

Explore More Just Features

Just offers a range of advanced features to streamline your development process:

• Path Aliasing: Simplify module imports and enhance code organization with build and runtime path aliases.

• Custom TypeScript Configuration: Use your own TypeScript configuration file for full customization.

• REPL Usage: Benefit from Just's interactive REPL (Read-Eval-Print Loop) for a more efficient development experience.

• Run One-off TypeScript Files: Easily execute individual TypeScript files.

For in-depth information on these features and detailed usage instructions, please refer to the official repository documentation on GitHub: Just Documentation.

Happy coding!