Create a React and Express js project with TypeScript.
June 26, 2022 3pm ET
Hello 👋🏼, let's build a React TypeScript log-in form and serve it from an Express TypeScript server.
We're not going to focus on how to build a log-in system; instead, we're going to work on the TypeScript and server integration.
When we finish, we'll upload the app to Heroku.
1. Set Up Your Node Environment.
- Make a new directory on your computer and go to that directory.
mkdir simple-react-form cd simple-react-form
- Create a Node js project, use the -y flag to create it without asking questions, and open the project in your code editor. Go to package.json and fill the empty values.
npm init -y code .
2. Set Up Express js and TypeScript.
Install through npm or yarn
npm install cors dotenv express
Next, install all the libraries related to TypeScript with the -D (development) flag. The concurrently library will let us run multiple commands in package.json scripts. The nodemon library will automatically restart the server when we make changes to any file in the directory.
npm install -D typescript @types/cors @types/express @types/node concurrently nodemon
- Create the TypeScript configuration file with the following command.
npx tsc --init
- In the tsconfig.json file uncomment and add this JSON values.
- Next, go to package.json and update the scripts section.
- Create index.ts in the root of the project and insert the next code.
- Restart your editor if you're using VS Code, open your terminal again and run:
npm run build npm run dev
- You should see this 👇 in your browser.
3. Set Up React and TypeScript.
Now it's time to build our React client-side. First, open your command terminal, ensure you're in the project's root, and install React with TypeScript as a client folder.
npx create-react-app client --template typescript
- Remove the git folder that Reacts installs by default.
$ cd client $ rm -rf .git
- Go to the src folder and create two folders: components and utils.
$ cd src $ mkdir components $ mkdir utils
Inside the components folder create another folder called
form-input, then, create
form-input.tsxand copy the code from below; this file will hold our reusable form inputs. If you want to manipulate the style of the input, create form-input.css in the form input folder.
$ cd components $ mkdir form-input $ cd form-input $ touch form-input.tsx
Go to the utils folder and add
data-utils.ts; this file will make the API calls to the server.
- Modify App.tsx; we're building the login form using the same classes and colors from React.
4. Add new routes and TypeScript to the server.
We're almost finishing. Go back to index.ts, and add the login route with additional types.
- Run both the client and the server in individual terminals.
npm run dev cd client npm start
- Start your App testing. You can Copy the Css here.
Check the second part of this tutorial, How to Upload a React and Express TypeScript project to Heroku.