Build Your First TypeScript Express App in Under a Minute!
Published: 2024-01-11 17:31:17

Developing a TypeScript application can be a daunting task with numerous configurations and setups. However, with the magic of the [Just](https://github.com/sonnyt/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](https://nodejs.org/en/download/).

## 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.

```bash
mkdir hello-world
```

### Step 2 - Initialize npm Package

Navigate into the "hello-world" directory:

```bash
cd hello-world
```

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

```bash
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.

```bash
npm install express
```

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

```bash
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:

```typescript
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](https://github.com/sonnyt/just), a powerful tool that simplifies development with TypeScript and Node.js. Install it as a development dependency by running:

```bash
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:

```bash
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:

```bash
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](https://github.com/sonnyt/just).

Happy coding!