Buildings

Build a Typescript React app and budle it with webpack.

We will create a minimal single page application, that demonstrates how to setup a project written in Typescript with Webpack as a build tool and React. It assumes basic knowledge of React and Typescript.

There are many ways to initialize a React application with Typescript quick and easy, like the Create React App project. However, by doing this, we’re essentially relying on external scripts, such as those provided by the Create React App module, and we lack complete control over how to bundle and optimize our build process. It also poses challenges when it comes to deploying our app on a remote server. That’s why every substantial project, intended for live deployment, requires the establishment of a proper build infrastructure.


Establishing a build infrastructure can be a somewhat tedious and complex subject, but fear not – in this example, we’ll keep it straightforward and enjoyable! 😊

Initialize the project

We’ll commence right from the outset – an empty folder – and construct everything from the ground up. This way, we’ll gain a deeper understanding of how the setup functions. The only essential tool you need to have installed is Node with npm. As of the time of writing this tutorial, I am using Node version 20 with npm version 10, but the specific versions you have installed shouldn’t pose a significant difference.

So, start with initializing the node project:

$ mkdir typescript-webpack
$ cd typescript-webpack
$ npm init -y

This will create a package.json with the default configuration based on the folder name. Here we will find all the dependencies and build scripts in our project.

Let’s now install our dev dependencies:

$ npm i webpack webpack-cli webpack-dev-server --save-dev
$ npm i typescript ts-loader --save-dev

This will install the most up-to-date versions of Webpack, TypeScript, ts-loader, the Webpack DevServer (for running our app in a development server), and the Webpack CLI (for initiating Webpack via the command line). We’ll delve deeper into the details of ts-loader and loaders in general shortly, but for now, keep in mind that ts-loader is a module that assists Webpack in compiling TypeScript files into JavaScript.

Now we can also install React as a dependency:

$ npm i react react-dom

Since we will be working with Typescript, we will also need to install the respective types for our dependencies:

$ npm i --save-dev @types/react @types/react-dom

As we are building a web application, we will definitely need CSS and HTML, so let’s also install a CSS loader and an HTML Webpack plugin.

$ npm install --save-dev css-loader style-loader html-webpack-plugin

The CSS loader aids Webpack in loading CSS files and using them within JavaScript through imports. On the other hand, the HTML plugin is a Webpack plugin. Plugins are modules that complement loaders and generally handle tasks that loaders can’t. In our scenario, this plugin enables Webpack to process HTML files.

Our package.json will now look similar to this:

{
  "name": "typescript-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/react": "^18.2.34",
    "@types/react-dom": "^18.2.14",
    "css-loader": "^6.8.1",
    "html-webpack-plugin": "^5.5.3",
    "style-loader": "^3.3.3",
    "ts-loader": "^9.5.0",
    "typescript": "^5.2.2",
    "webpack": "^5.89.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

There may be differences in the versions depending on when you are reading this tutorial. The important here, is that Webpack should be at least version 5.

We have installed everything, let’s write some code!

Create the React Typescript App

We will create a very minimal and simple app using nothing more than React and some CSS.

First, let’s create a public folder, where we will save out static files.

./public/index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <title>Webpack with Typescript</title>
</html>
<body>
    <div id="app"></div>
</body>

We only need a div with an id, so that React can identify the div and render the app inside.

We will create a second src folder to save the Typescript files.

./src/index.tsx

import React from "react";
import ReactDOM from "react-dom";
import { App } from "./App";
import "/public/style.css";

ReactDOM.render(<App />, document.getElementById("app"));

Recall the app ID mentioned earlier? Here, React DOM locates the div with the app ID and proceeds to render an App component, as we’ll explore later. You might have also noticed the presence of the style.css file, so let’s go ahead and define that as well:

./public/style.css

.main {
  color: #0066ff;
  font-family: Georgia, serif;
}

And our App component:

./src/App.tsx

import React from "react";

export function App() {
  return (
    <div className="main">
      <h1>Webpack is Working!</h1>
      <p>Next step, modify the App component with your custom code.</p>
    </div>
  );
}

The component will render a light blue heading with a paragraph.

Configure the Webpack build

Our React app is all set to launch 🚀, but hold on a second, how can we view it live? 🤷‍♀️ For that, we require a server, and our files need to be bundled in a server-friendly format. This is where Webpack takes center stage, flexing its muscles! 💪

The main file we need to configure Webpack is a webpack.config.js file, this will look like this:

./webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.tsx",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "index.js",
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        resolve: {
          extensions: [".ts", ".tsx", ".js", ".json"],
        },
        use: "ts-loader",
      },
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",
    }),
  ],
};

There’s quite a bit to unpack here. First and foremost, let’s begin with the understanding that Webpack’s configuration language is JavaScript, which runs on Node. It’s essentially a JavaScript module, which means we can employ JavaScript functions, conditional statements, and loops – whatever we need. It’s akin to Infrastructure as Code, but let’s delve into the specifics:

  • Entry: In this example, we illustrate the simplest form of the entry declaration. Here, we specify the main JavaScript file responsible for running the app. It can have a more complex format to support multiple entries if needed.
  • Output: This is where all the bundles will be generated when we execute the build. If left empty, Webpack will generate these bundles in a default location. In this instance, we preset our preferred directory and file name for the JavaScript bundle.
  • Modules: Here, we define our loaders. As mentioned earlier, loaders are modules that assist Webpack in handling specific file types. In our case, we’ve set up a loader for CSS and another for TypeScript files. It’s worth noting that Webpack runs the loaders from bottom to top and from right to left. This means that, in the case of CSS, the css-loader is applied first, followed by the style-loader, creating a processing pipeline.
  • Plugins: These are JavaScript classes that can be instantiated multiple times. Plugins handle tasks that loaders may not cover and can perform additional operations, such as file copying. In our example, we’ve defined a single plugin to manage HTML files, and it simply requires an HTML entry.

Webpack will also need a configuration for Typescript:

./tsconfig.json

{
  "compilerOptions": {
    "target": "ES2015",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "jsx": "react"
  },
  "exclude": ["node_modules"]
}

These are the recommended Typescript options from the docs with the only difference, we also declared a jsx property, in order to enable JSX syntax in Typescript.

Run the server and build

Now that we’ve configured Webpack, the final step is to add two more scripts to our package.json file. One script will initiate the development server for testing our app, and the other will handle the building and bundling process:

./package.json

"scripts": {
    "start": "webpack serve --mode=development",
    "build": "webpack --mode=production"
},

Now we can run the app in the DevServer with “npm start”.

Webpack is working
Everything worked!

Visit http://localhost:8080/ to view the running React app.

We can also trigger the build process using “npm run build.” Once the build is complete, you can examine the generated files in the “dist” folder. This folder includes the index.html file with the script tags, the bundled JavaScript file, and another file containing licenses for the open-source libraries we’ve utilized.

React app tree
Final structure with build bundles

This is all you need to deploy in any http server and view your app live 🎉!

You can view the finished version of this app here, thanks for reading 😊!

In a future post, we will explore how to make use of the bundled files and deploy them within a Docker container.

Posted

in

by

Theodosis Asvestopoulos

Tags:

, , ,