Our Initial ReactJS/TypeScript setup

Initial project creation

We use IDEA to start up new TypeScript/ReactJS projects.

Just remember to enable the TypeScript checkbox.

IDEA actually uses create-react-app behind the scene. (TODO: Insert the command here)

While create-react-app initializes the project, you have plenty of time to get fresh cup of coffee/tea.

Once you see a text about readiness (TODO: Add that text here), you can continue.

Change everything as development dependency

You should go and edit ./package.json so that everything in the dependencies section is located at devDependencies. We will not have any runtime dependencies since the project is compiled as a single bundle.

Setup IDEA's configuration not to be in git

You should append .idea to .gitignore, even if you are not using IDEA. If .idea is already in git, please remove it completely from git first.

Install core dependencies

Open a terminal and execute:

npm i --save-dev \
   node-sass@4.14.1 '@types/node-sass' \
   lodash '@types/lodash'

Install our core TypeScript library

You should also install our core TypeScript library:

mkdir -p src/fi/nor
git submodule add git@github.com:sendanor/typescript.git src/fi/nor/ts
git config -f .gitmodules submodule.src/fi/nor/ts.branch main
git add .gitmodules

Install NodeJS type information

While not strictly necessary for frontend projects, you could also install type info for NodeJS:

npm install --save-dev @types/node

Rename CSS files as SCSS

Now, you should rename *.css as *.scss.

If you use IDEA, it should automatically replace paths in imports and exports correctly.

Expert note: Configure shortcut (or Apple TouchBar action) to Rename files.

Move App to its own subdirectory

Next, you should move App.* to directory src/components/app.

Same here, you shouldn't need to manually fix imports/exports.

Expert note: Configure shortcut (or Apple TouchBar action) to Move files.

If you are going to be using a backend, set up a development proxy now

First, install http-proxy-middleware:

npm i --save-dev http-proxy-middleware

Create a file named src/setupProxy.js and append this there:

const REACT_APP_BACKEND_TARGET_URL = process?.env?.REACT_APP_BACKEND_TARGET_URL ?? 'http://localhost:3500';

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
    app.use(
        '/api',
        createProxyMiddleware({
            target: REACT_APP_BACKEND_TARGET_URL,
            changeOrigin: true,
            autoRewrite: true,
            //protocolRewrite: 'http',
            pathRewrite: {
                ['^/api'] : ''
            }
        })
    );
};

Now, you can control where /api/... is forwarded:

REACT_APP_BACKEND_TARGET_URL='http://localhost:8080' npm start

This will redirect http://localhost:3000/api to http://localhost:8080.

REACT_APP_BACKEND_TARGET_URL defaults to http://localhost:3500.

Test if the system runs

You can test if the app starts:

npm start

Sometimes IDEA fails to fix import/exports, so fix them manually now.

Make sure everything is in git

Finally, make sure everything is committed to git and push your initial working version now.