Create an Express, React, Typescript site

Express for the proxying and routing. ReactJS for the pages. Typescript for all front and back end development, Lambdas, Microservices and so on.

Credits

https://dev.to/dirk94/how-i-structure-my-express-typescript-react-applications-g3e

https://www.npmjs.com/package/express-generator-typescript

https://daveceddia.com/create-react-app-express-backend/

https://webpack.js.org/guides/typescript/

https://levelup.gitconnected.com/usetypescript-a-complete-guide-to-react-hooks-and-typescript-db1858d1fb9c

https://dev.to/muhajirdev/unit-testing-with-typescript-and-jest-2gln

why

These are notes for myself, its a cribsheet with little explanation.

How

A structure like this

all-dev/           # where all my code lives
   typescript      # Where my typescript stuff goes, I also have goland, java, scala
     NewProj/      # The new project Here
        server     # server side stuff
        client     # For the web pages, .ts and .tsx

We are going to run the react UI dev server on port 3000, and express where we will host our server apps on port 3001. Note many people simply nest the client project within the express public folder. However, I will be having multiple servers (not even servers, just lambdas, but I want to start somewhere) at some point so wanted to start this way, with the client deployed as a static site in AWS.

How

  1. Make the project dir 
    cd all-dev
mkdir NewProj
cd NewProj
  2. Make the server 
    npm install -g express-generator-typescript
npx express-generator-typescript "server"
cd server
set PORT=3001 && npm run start:dev

    It’s worth noting that this then runs nodemon as shown on stdout

    .. starting `ts-node -r tsconfig-paths/register ./src`

So, in turn, nodemon is using ts-node to execute the files in the src directory.

In Intellij Ultimate, you can debug the express server - load the project. Set up a run config which uses the

Node Interpreter: Project
Node Parameters: --require ts-node/register -r tsconfig-paths/register ./src
Working Directory: C:\all_dev\typescript\NewProj\server\

You can now debug like in any other language. If you come from Java, Scala, goLang (in goLand) then Intellj ultimate is frankly a no brainer.

  1. Make the client 
    cd all-dev/NewProj
npx create-react-app client --template typescript
cd client

    Edit package.json and add the proxy to tell it to call thru to express, add the line under scripts

    "proxy": "http://localhost:3001",

    Then start up the node server - any server calls from the webpages will go to node in the client dir and get forwarded to the express server.

    npm start

Sadly, it didnt set up the webpack config, so add this to the client

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: [ '.tsx', '.ts', '.js' ],
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

Debugging the client is more involved, and IntelliJ tells you how, but actually Chrome dev tools are pretty good, and so are unit tests, so I have yet to bother.

Useful commands in the express folder

npm test
npm run build              # Builds for production
npm start                  # run production build
  1. Make a Lambda

https://docs.aws.amazon.com/lambda/latest/dg/nodejs-handler.html

So, sometimes you just want an AWS lambda. If you have already installed ts-node and typescript you can miss out the steps to install them. In intellij https://www.jetbrains.com/help/idea/typescript-support.html

cd all-dev/NewProj
mkdir lambda
cd lambda
npm init
npm install --save-dev @types/jest @types/node jest ts-jest typescript
tsc --init
npm i ts-node

The rest, well, I took it from https://scotch.io/@nwayve/how-to-build-a-lambda-function-in-typescript

In Intellij Ultimate, you can debug the code - load the project. Set up a run config which uses the

Node Interpreter: Project
Node Parameters: --require ts-node/register -r tsconfig-paths/register ./src
Working Directory: C:\all_dev\typescript\NewProj\server\

You can now debug like in any other language. If you come from Java, Scala, goLang (in goLand) then Intellj ultimate is frankly a no brainer.

testing

npm i @types/jest jest ts-jest

Means I can do Jest testing.

You also need a jest.config.js, eg https://dev.to/muhajirdev/unit-testing-with-typescript-and-jest-2gln

That is it

The rest is up to you. If I hit any more issues I’ll add to the page.