A Real-World Project: Typescript, Express and React

How I structure my Typescript + Express + React projects

Aquaduct Structure — Photo by Paul-Louis Pröve on Unsplash

In this article, I will show you how I set up and structure my Express — React projects.

Folder structure

When I set up a React Express app I always use the following folder structure.

├─app
├─build
├─frontend

• The app directory will hold the Express backend application.
• The build directory will hold the production build of the frontend and backend application
• The frontend directory will hold the React frontend application.

Note that you are free to use any other folder structure that you like, this is simply my preferred way of doing things.

Creating the React app

Let’s begin with creating the React app. I’m going to use the create-react-app npm package for this.

You can run npm packages without installing them using the npx tool.

npx create-react-app frontend

The react app will be created in the frontend folder.

Let’s test if the installation went correctly.

cd frontend
yarn run start