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

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

That is it

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