Skip to content

ToDo List App Tutorial Part 2: Setup

Andrei Fangli edited this page Jul 3, 2021 · 4 revisions

In ToDo List App Tutorial Part 1: Requirements we've established what we want to do, now we need to do a little bit of project setup.

We will configure Webpack with all the tools we need and have a sample "Hello World!" application and start building from there. This may not be the most interesting part of the tutorial if you are already familiar with Webpack, the configuration done here is minimal. If you want to skip this part feel free to jump directly to ToDo List App Tutorial Part 3: Adding a List of Items, by the end of this part we will have a functioning React app that displays an underline "Hello World!".

First thing we want is a folder for our project, I'll be calling mine todo-app and open VS Code in that folder. Any IDE or text editor will do, even notepad.

First we will initialize the package folder by running npm init, it's smart enough to pick defaults pretty good, change anything that you wish.

Next we will install our dev dependencies, these are packages that are used only for building our application and are not used by the (would be) production server.

npm install --save-dev webpack webpack-cli webpack-dev-server ts-loader typescript style-loader css-loader html-webpack-plugin @types/react @types/react-dom

Next we will install our "normal" dependencies.

npm install --save react react-dom

There is no difference between "normal" dependencies and dev dependencies, npm treats them exactly the same. The difference is only in semantics, an important aspect of this differentiation is that it allows us to group dependencies into two categories, what we need for the application to run and what we need extra in order to build the application. For instance, if we want to reduce the bundle size, we can go through the packages in the "normal" dependencies list and load them in the application through CDNs rather than including them in our build bundle. This will can have some performance benefits as our application size decreases, the CDN bundles can be safely cached, and not just by our application and overall traffic is reduced when accessing the application.

Next we will write the Webpack config. Our source files will be in the src files and the output in dist.

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

module.exports = {
    mode: "development",
    entry: path.resolve("src", "app.tsx"),
    resolve: {
        extensions: [".ts", ".tsx", ".js"],
    },
    output: {
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: "ts-loader"
            },
            {
                test: /\.css$/,
                use: [
                    "style-loader",
                    "css-loader"
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: "Todo App with MVVM",
            hash: true,
            inject: false,
            scriptLoading: 'blocking',
            meta: {
                charset: 'utf-8'
            },
            templateContent: function ({ htmlWebpackPlugin }) {
                return `<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta charset="utf-8">
    ${htmlWebpackPlugin.tags.headTags}
    <title>${htmlWebpackPlugin.options.title}</title>
</head>
<body>
    <div id="app"></div>
    ${htmlWebpackPlugin.tags.bodyTags}
</body>
</html>`;
            }
        })
    ],
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        port: 9000,
        open: true
    },
};

Since we are using TypeScript, we will need a tsconfig.json file as well.

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "jsx": "react",
        "moduleResolution": "node",
        "lib": [
            "ES6",
            "DOM"
        ],
        "strict": true,
        "alwaysStrict": true,
        "allowJs": false,
        "skipLibCheck": true,
        "esModuleInterop": true
    },
    "include": [
        "./src"
    ],
    "exclude": [
        "./node_modules"
    ]
}

Finally, we get to our entry point which is just a .tsx file containing the boilerplate code for loading the application.

import React from "react";
import ReactDOM from "react-dom";
import "./style.css"

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

function App(): JSX.Element {
    return (
        <h1>Hello World!</h1>
    );
}

And of course our stylesheet which underlines our text.

h1 {
    text-decoration: underline;
}

To do a quick test, we can build the application using npx webpack.

To make our development easier, we will be using webpack-dev-server. To start the server execute npx webpack serve.

Now that that's done, it's time to move to actually using MVVM in our project. We will continue with ToDo List App Tutorial Part 3: Adding a List of Items.

Clone this wiki locally