Development in React, using TypeScript and WebPack

How to setup an initial development environment for React using both TypeScript and WebPack.

At Infi we provide software solutions that suit our customers needs. This could for example be by building an API or by building a crude user interface for simple forms and data management. Some customers however are very focused on presenting their product in a very user friendly and good-looking way. Such a frontend webapp is very suited to be built using a state of the art JavaScript framework such as Angular, VueJs or React.

At our office in Amsterdam, we have been working on a couple of such projects using React. In addition, we have also been working on a couple of mobile apps built in React Native. While working on these projects we have picked up on some tricks which we will be sharing through a couple of blogs, starting with setting up a React project from scratch. We will be providing code examples for this which will be made publicly available on our Github Page.

Before diving in however we will need to do some preparation. First off, we will need to install NodeJS, since we will need to use the Node Package Manager (npm) to install packages for our app. At the time of writing this, I’m using the latest stable version of NodeJS which is 13.12.0. The provided npm version for this installation is 6.14.4.

After the installation has finished, open a terminal and navigate to the folder you want to hold your application. In this folder, run the command npx create-react-app <app-name> --template typescript.

In the create-react-app command we provide a couple of parameters. <app-name> will represent the name of the app, which can be named at your own discretion. The --typescript parameter will initialize the app to use TypeScript instead of plain JavaScript. We tend to use TypeScript for our React projects, since the typing of methods and variables will result in cleaner code that will be less prone to typing errors. If you have never used TypeScript before, I would highly suggest checking out TypeScript in order to bring the quality of your code to the next level. If you don’t want to make use of TypeScript hoewever, you could simply leave out this parameter. (Note however that the examples inside these blogs will most likely be using TypeScript, so any changes that are needed to make your code work for regular JavaScript, have to be made by yourself).

Note that if you are using Windows, this command might fail if you have spaces in your Windows username. If this happens to you, you will have to configure the cache path using the command: "C:\Users\Firstname~1\AppData\Roaming\npm-cache" --global. Where Firstname is the first part of your Windows username, before any spaces occur.

In order to get a bit more grip on the packaging process of the application, the project will make use of Webpack. This will allow us to add loaders to pre-process files and transpile our TypeScript back to JavaScript (since the output file that can be run inside the browser will be a JavaScript file). In order to do so we will add a file called webpack.config.js inside our application folder. This will also allow us to

There are some parts in in this file that will prepare us for the potential use of SCSS, serving certain types of files and the use of hot-reloading for faster development. Note that this is not a configuration specified for use in production applications, where you would probably make specific changes for different modes, such as Development or Production, where the application can be build and use appropriate loaders for each mode or scenario.

We will use the following content for webpack.config.js.

const path = require("path");
const webpack = require("webpack");
const dotenv = require("dotenv").config();

const HTMLWebpackPlugin = require("html-webpack-plugin");

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

var outputFilename = "index.js";

module.exports = {
    mode: "development",
    entry: "./src/index.tsx",
    output: {
        path: path.join(__dirname, "dist"),
        publicPath: "/",
        filename: outputFilename,
    },
    plugins: [
        // Suggested for hot-loading
        new webpack.NamedModulesPlugin(),
        // Prevents compilation errors causing the hot loader to lose state
        new webpack.NoEmitOnErrorsPlugin(),
        new webpack.DefinePlugin({
            "process.env": JSON.stringify(dotenv.parsed)
        }),
        new HTMLWebpackPlugin({
            // Use this template to get basic responsive meta tags
            template: "public/index.html",
            // inject details of output file at end of body
            inject: "body"
        }),
        new OptimizeCssAssetsPlugin({
          assetNameRegExp: /\.css$/g,
          cssProcessor: require('cssnano'),
          cssProcessorPluginOptions: {
            preset: ['default', { discardComments: { removeAll: true } }],
          },
          canPrint: true
        }),
        new MiniCssExtractPlugin({
            filename: '[name]-[hash].min.css',
            allChunks: true
        }),
    ],
    resolve: {
        modules: [path.join(__dirname, "app"), "node_modules"],
        extensions: [".js", ".ts", ".tsx", ".scss", ".png", ".pdf"]
    },
    module: {
        rules: [
            {
                test: /\.(config)$/,
                loader: 'file-loader?name=[name].[ext]'
            },
            {
                test: /\.tsx?$/,
                exclude: /node_modules/,
                loader: 'awesome-typescript-loader',
                options: {
                    useBabel: true,
                },
            },
            {
                test: /\.(woff|woff2|ttf|eot)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                exclude: [/node_modules/],
                loader: "file-loader"
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                exclude: [/node_modules/],
                loader: "file-loader"
            },
            {
                test: /\.(pdf)$/i,
                exclude: [/node_modules/],
                loader: "file-loader",
                options: {
                    name: '[name].[ext]',
                },
            },
            {
                test: /\.(sa|sc|c)ss$/,
                exclude: [/node_modules/],
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                    },
                    'css-loader',
                    'sass-loader',
                ],
            },
        ]
    },
    devServer: {
        inline: true,
        stats: "errors-only",
        contentBase: path.join(__dirname, "public"),
        historyApiFallback: true,
        open: true,
    }
};

Since we are making use of webpack and a couple of plugins within the webpack configuration, we need to add some dependencies to our package.json. You can obviously change the name of the app and the author in this file accordingly. In order to make things work, our dependencies should be the following:

{
  "name": "introduction",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@babel/core": "^7.9.0",
    "@babel/preset-env": "^7.9.5",
    "@babel/preset-react": "^7.9.4",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@types/jest": "^24.0.0",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.0",
    "@types/react-dom": "^16.9.0",
    "@types/webpack-env": "^1.15.1",
    "awesome-typescript-loader": "^5.2.1",
    "babel-core": "^7.0.0-bridge.0",
    "babel-loader": "^8.1.0",
    "babel-polyfill": "^6.26.0",
    "css-loader": "^3.5.1",
    "mini-css-extract-plugin": "^0.9.0",
    "file-loader": "^6.0.0",
    "html-webpack-plugin": "^4.2.0",
    "node-sass": "^4.13.0",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1",
    "typescript": "~3.7.2",
    "webpack": "4.42.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  },
  "scripts": {
    "start": "npm run dev",
    "dev": "node start-dev-server.js",
    "build": "webpack",
    "prod": "webpack -p",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

To make sure we can change our code without having to restart the application every time, which will become tiring very fast, we will add a webpack-dev-server, which will automatically reload our application when we make changes to it and instantly show them to us in our browser. In order to do so we will need to add a file called start-dev-server.js containing the following lines of code:

const execSync = require('child_process').execSync;
require('dotenv').config();

execSync(`webpack-dev-server --hot --colors --port ${process.env.PORT}`, {stdio: 'inherit'});

We make use of the variable process.env.PORT in the final line of this script. In order to read the value process.env.PORT we will need an environment file. This can be done by adding an .env file. For now this file will only contain only one line, indicating the port of localhost where our application can be reached:

PORT=1234

Usually the .env file will contain variables you do not want to disclose to everyone, meaning you probably do not want to add this file to your git repository. In order to overcome this, you could generate this file and its contents using a continuous integration process, or by adding the file manually on your production environment (although the latter will be more error prone).

Finally we have to change the index.html page slightly. Webpack will not be able to resolve the %PUBLIC_URL% tags. We can safely remove all of the tags in the <head> tag as follows:

<head>
  <meta charset="utf-8" />
  <link rel="icon" href="favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#000000" />
  <meta
    name="description"
    content="Web site created using create-react-app"
  />
  <link rel="apple-touch-icon" href="logo192.png" />
  <link rel="manifest" href="manifest.json" />
  <title>React App</title>
</head>

When this is done your changes to the folder should look like this:

folder_changes

We should be able to run the various npm commands now. In order to run our app we first have to run npm install. This will install all dependencies that are defined in the package.json file. This process could take some minutes, since all the dependencies and packages have to be downloaded (if they are not yet present on your development machine).

Once this is done, we can run the npm start command. This will start our application and will automatically open a new tab in a browser (since we defined our dev-server package to do so). When the page is loaded and we make changes to our App.tsx file (or any other component we add to our App), the changes will almost instantly be visible in our browser.

The template also provides a basic test script. We can run the npm test script to start a continuous test process for our app. In this continuous process, the command a will run all tests. Alternatively we could have added this as a third parameter by calling npm test a. If we want to quit the test process we can simply press q.

In the following post, we will look at some tips and tricks when developing a React Application.

[René is developer bij Infi]

Wil je op de hoogte blijven van updates over hippe tech, een kijkje achter de schermen, of upcoming events? Schrijf je in voor onze nieuwsbrief!

Infi maakt het allemaal waar:

browser-icon

Webapplicaties

Wij ontwikkelen webapplicaties op maat waarmee we jouw ideeën waarmaken. Maatwerkapplicaties gebouwd door ambitieuze nerds die niet schrikken van uitdagende logica, complexe databases, datamigraties of betaalomgevingen. Daarnaast verzorgen we ook de hosting, onderhoud en support. Wij willen jouw ideeën fixen. Wil je weten hoe?
Ontdek wat een webapplicatie voor je kan doen >

mobile-icon

Mobiele apps

We zijn nerds met liefde voor softwareontwikkeling, dus ook voor de ontwikkeling van mobiele applicaties (apps). Native apps voor iOS en Android, maar ook voor mobiel gebruik geoptimaliseerde webapplicaties. Wij weten wat erbij komt kijken en hebben de kennis voor web, iOS en Android allemaal in huis. Wil je weten wat het beste bij je past? 
Ontdek wat een mobiele app voor je kan doen >

Ben jij onze nieuwe ontwikkelheld(in)?

› Dit kun je verwachten als jij je aanmeldt.

Wil je iets waarmaken met Infi?

Wil jij een eigen webapplicatie of mobiele app waarmee jij het bij anderen maakt?

Waargemaakt door de nerds van Infi.
Nerds met liefde voor softwareontwikkeling en die kunnen communiceren. En heel belangrijk: wat we doen, doen we met veel lol!

Wij willen het fixen. Laat jij van je horen?