MERN TypeScript Setup Guide

Hello, Welcome to my guide on setting up a MERN stack project using TypeScript. This guide is designed to help both beginners and experienced developers to set up a fully functional development environment for MERN stack development.

Now, let’s get started with the setup.

Requirements

• Node.js (version 14 or above recommended)
• MongoDB database or MongoDB Community Server
• Install TypeScript using the following command:

npm install -g typescript

Root

1. Create a directory for your project with the following command:

<span>mkdir my-app</span>

2. Navigate to the directory:

<span>cd my-app</span>

3. Run the following command to initialize node in our directory.

Explanation: This command initializes a new Node.js project and creates a package.json file with default values.

npm init -y

Client

For the client, you can use either Vite or Create React App. Here are the instructions for both:

Using Vite

1. On your root directory, type the following command:

Explanation: This command creates a new Vite application in a directory named client.

npx create-vite@latest client

2. You will see different options, select React.
3. Choose the option: TypeScript SWC.
4. Once it finishes, use the following command to navigate to the client directory.

<span>cd client</span>

The following commands need to be run in the client directory.

5. Once in the client directory, run the following command to install all dependencies.

Explanation: This command installs the dependencies listed in the package.json file.

npm install

6. Once installed, navigate to the Project’s root directory using the following command:

<span>cd ..</span>

Using Create React App

1. On your root directory, type the following command:

Explanation: This command creates a new Create React App application in a directory named client.

npx create-react-app client --template typescript

Server

1. On your root directory, let’s create the server directory.

Explanation: This command creates a new directory named server.

<span>mkdir server</span>

2. Navigate to the server directory using the following command:

<span>cd server</span>

The following commands need to be run inside the server directory we’ve created.

3. Run this command to automatically create package.json file.

npm <span>init -y</span>

4. Now, run the following commands to install our dependencies.

Explanation: These commands install the necessary dependencies for our server. cors is used for enabling CORS, dotenv for loading environment variables, express for building the server, and mongoose for connecting to MongoDB. The development dependencies include TypeScript and the type definitions for our packages, as well as nodemon and ts-node for running our server during development.

npm install -g typescript

5. Create a .gitignore file and add the following lines to it:

Explanation: The .gitignore file specifies intentionally untracked files that Git should ignore.

<span>mkdir my-app</span>

6. Now, let’s setup TypeScript, create a file named tsconfig.json

Explanation: The tsconfig.json file is a configuration file for TypeScript. It specifies the root files and the compiler options to compile the project.

7. Copy and Paste the following configurations:

<span>cd my-app</span>

8. Create a directory named src inside your server directory using the following command:

npm init -y

The following commands need to be run inside the src directory we’ve created.

9. Create a file called server.ts

Explanation: This server.ts file sets up an Express server that connects to a MongoDB database and starts listening on a specified port.

10. Here’s a basic implementation of what the server.ts file should look like:

npx create-vite@latest client

11. Let’s head back to the server directory using the following command:

<span>cd client</span>

Explanation: This command changes the current directory to the parent directory.

The following content is for the server directory.

12. Now, let’s head over to our package.json file in the server directory.

13. Let’s add a command so that we can run nodemon with ts-node for our development.

14. Copy and paste this line on the script part of your package.json:

npm install

15. Once this is done, let’s head over to the root directory with the following command:

<span>cd ..</span>

Running our project

The following content is for the project’s root directory

1. Run the following command to install the development dependency concurrently.

Explanation: concurrently is a package that allows you to run multiple npm scripts concurrently (at the same time).

npx create-react-app client --template typescript

2. Navigate to the package.json file in the root directory. This file contains metadata about your project and its dependencies.

3. Depending on the tool you used to create your client (either Vite or Create React App), copy the corresponding code block and paste it into the scripts section of your package.json file.

Vite

npm install -g typescript

Create React App

<span>mkdir my-app</span>

4. Now, let’s run our project using the following command:

<span>cd my-app</span>

5. Now, our client and server should be running concurrently. You should see the following output in your terminal:

npm init -y

The above is the detailed content of MERN TypeScript Setup Guide. For more information, please follow other related articles on the PHP Chinese website!