DEV Community: Anubhav Sarkar

Setup a React App using Webpack, Babel and TypeScript

Anubhav Sarkar — Fri, 05 Mar 2021 14:31:34 +0000

This article is part of a two part series on how to configure a React app from scratch with Webpack and Babel and eventually add TypeScript to it. To read the first article in this series, click on the below link.

Setup a React app with Webpack and Babel

So you stumbled upon TypeScript and loved how you will be able to add type safety along with a whole bunch of other things that it has to offer. So, let's modify last week's app and add TypeScript to it. In case you haven't read last week's article on how to setup a react app with webpack and babel, feel free to go through the below link and setup a basic react app to which we can add TypeScript.

To get the starter code click on this below link.

Link to the GitHub repo: react-with-webpack

Let's start with the required steps now.

Install the following packages typescript,
@types/react and @types/react-dom using the following command.

You can also replace the --save-dev with a more subtle -D to install any package as a dev dependency.
```
npm install typescript

npm install @types/react @types/react-dom --save-dev
```


    **@types/react:** contains type definations for React.

    **@types/react-dom:** contains type definations for React DOM.

2. We will need to let Babel know that we are including typescript in the project. So, let's go ahead and install the package **@babel/preset-typescript** as a dev dependency.

    ```


    npm install @babel/preset-typescript --save-dev

Now we have a mean to let Babel know of the typescript files that we will be using. But we still need to load these files with webpack, right? For that we need another package named as ts-loader.
```
npm install -D ts-loader
```


    Your **package.json** file should look something like this.

    <img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1614875520420/ugOzSsHPE.png" alt="package.json" />

4. We have all the required packages now. It's time to make some changes in our *webpack.config.js* and *.babelrc* file.

    Replace the below code with the one present in your **.babelrc** file.

    ```


    {
        "presets": [
            "@babel/env",
            "@babel/react",
            "@babel/preset-typescript"
        ],
        "plugins": [
            "@babel/plugin-proposal-class-properties"
        ]
    }

As you can see, we are adding a new preset which is the *@babel/preset-typescript* to our already existing set of presets.

Time to make changes to our **webpack.config.js** file now. Copy the below code and replace the existing code which is present in the file.

```

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

module.exports = {
    entry: "./src/index.tsx",
    output: { path: path.join(__dirname, "build"), filename: "index.bundle.js" },
    mode: process.env.NODE_ENV || "development",
    resolve: {
        extensions: [".tsx", ".ts", ".js"],
    },
    devServer: { contentBase: path.join(__dirname, "src") },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: ["babel-loader"],
            },
            {
                test: /\.(ts|tsx)$/,
                exclude: /node_modules/,
                use: ["ts-loader"],
            },
            {
                test: /\.(css|scss)$/,
                use: ["style-loader", "css-loader"],
            },
            {
                test: /\.(jpg|jpeg|png|gif|mp3|svg)$/,
                use: ["file-loader"],
            },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.join(__dirname, "src", "index.html"),
        }),
    ],
};


5. Time to use TypeScript. But wait, we need something to specify that this directory is a TypeScript project, right! We also need to provide the compiler options in which our TypeScript files will be compiled. For that we will need a new file named as **tsconfig.json**.

    Let's go ahead and create that file.

    ```


    touch tsconfig.json

For now, remove the existing code from the **tsconfig.json** file and replace it with the below code.

```

{
    "compilerOptions": {
        "target": "es5",
        "lib": [
            "dom",
            "dom.iterable",
            "esnext"
        ],
        "allowJs": true,
        "skipLibCheck": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "noFallthroughCasesInSwitch": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": false,
        "jsx": "react-jsx"
    },
    "include": [
        "src"
    ]
}


    Let's go over the attributes now.

    **"target": "es5" =>** will compile es6 or above code to es5 so that it is compatible with browsers.

    **"include": [src]" =>** specifies that only the files in the *src* folder should be included.

    **"sourceMap": true =>** Generates corresponding ‘.map’ file so that it can be used in the production code for debugging.

    **"strict": true =>** enables a wide range of type checking behavior that results in stronger guarantees of program correctness.

    **"allowJs": true =>** allows JavaScript files to be imported inside your project, instead of just .ts and .tsx files.

    To learn more about the various attributes used in the file visit this [link](https://www.typescriptlang.org/tsconfig).

6. Last but not the least, its time to rename our JavaScript files (**.js**) to TypeScript - React (**.tsx**).

      <img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1614876953079/38HnYETS7.png" alt="react-with-typescript" />

     *renamed index.js & App.js to index.tsx & App.tsx respectively*

7. Go ahead and run the below command to start the app.

    ```


    npm run start

The app will be served at **http://localhost:8080**.

Well, you have successfully added TypeScript to your project. Go ahead and make use of its functionalities to build great webapps.

Have a great day. Thanks for reading the entire thing.

Here's the link to the Github Repo in case you have faced some issue during the entire process. Feel free to make some tweaks if you find something breaking because of updates to any of the packages.

Cover Photo by Cristina G

Setup a React app with Webpack and Babel

Anubhav Sarkar — Fri, 26 Feb 2021 03:19:48 +0000

This article is part of a two part series on how to configure a React app from scratch with Webpack and Babel and eventually add TypeScript to it. To read the second article in this series, click on the below link.

Setup a React app with Webpack, Babel and TypeScript

So you want to start with a new React app or would like to add React to an already existing project, but don't want to use the create-react-app. Well you have come to the right place. I am here to guide you today on how to setup a react app from scratch with Webpack and Babel.

To create a new react app using Webpack and Babel, the first thing which we would need to install is Node JS. You can install the latest version for your machine by going to this link.

Once you have Node JS installed, we can start with the below steps.

Create a new folder. You could use the following commands to create a new folder. Once the folder is created navigate to the folder using the cd command.
```
mkdir <folder_name>

cd <folder_name>
```
While you are inside the folder, create a new package.json file, using the command given below.
```
npm init -y
```
This above command generates a package.json file, no questions asked. You could use the below command to generate the file by manually providing all the information.
```
npm init
```
It asks for these few details at the time of creation.
```
a. package name (name for your app)
b. version (1.0.0 - initially)
c. description (a small description for your app)
d. entry point (entry point for the module)
e. test (any test command)
f. author (author of the app)
g. git (git repository url and type)
h. license (MIT/ ISC etc.)
```
Once the package.json file is created, go ahead and create a 'src' folder. This is where our code will live.

Now use the touch command to generate these two files:
```
touch index.html - (the page which is rendered and visible to the user)

touch index.js - (the entry point for our application)
```

Setup an index.html file with the below code and save it.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport"
            content="width=device-width, initial-scale=1, shrink-to-fit=no"
        />
        <meta name="theme-color" content="#000000" />
        <title>React with Webpack and Babel</title>
    </head>
    <body>
        <noscript>
            You need to enable JavaScript to run this app.
        </noscript>
        <div id="root">
            <!-- This div is where our app will run -->
        </div>
    </body>
</html>

Note: The file should look like the screenshot below.

Leave the index.js as it is for now. We will configure it after installing all the required packages.

Now let's add Webpack to our project.

Install these packages through npm or yarn, whichever you prefer.
```
npm install webpack webpack-cli webpack-dev-server --save-dev
```
webpack allows us to configure our app, webpack-cli helps us to use webpack on command line, webpack-dev-server is used to live reload the webpage so that we can view our changes without refreshing the page manually.

Once those packages have been installed, the packages should be visible in the devDependencies section like below.

P.S: You may want to remove the caret(ˆ) from the version of the packages, as we don't know whether the new updates might bring breaking changes or not. It's always better to manually update the versions.
It's time to add a new file again. Use the touch command as you did above to add the webpack.config.js. It should be installed at the root directory.
```
touch webpack.config.js
```
Let's go ahead and install the path package as a devDependency since we need to work with paths in our app. We wouldn't want to inject the index.js file inside the HTML file. Go ahead and install the html-webpack-plugin to help us do that automatically.
```
npm install path html-webpack-plugin --save-dev
```
This is how your package.json should look at the moment.
Replace the contents of index.js with the below content.
```
 (function helloWorld() {
      console.log('Hello World');
 }());
```
Once this is done, let's run webpack and see what happens. Use the command provided below.
```
 npm run webpack
```
Webpack will automatically take the src/index.js file, compile it and output it to dist/main.js
and minify the code.

npm run webpack output

main.js added to dist folder

We can now go ahead and run the npm start command to run the app.
```
 npm start
```
npm start output

Naviage to localhost:8080 and you should be able to see a screen just like below.

localhost started on the default browser

To stop the server press, Ctrl + C on Windows and Command + C on Mac.
Copy the code below and paste it in the webpack.config.js file.
```
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    entry: path.join(__dirname, "src", "index.js"),
    output: { path: path.join(__dirname, "build"), filename: "index.bundle.js" },
    mode: process.env.NODE_ENV || "development",
    resolve: { modules: [path.resolve(__dirname, "src"), "node_modules"] },
    devServer: { contentBase: path.join(__dirname, "src") },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.join(__dirname, "src", "index.html"),
        }),
    ],
};
```
webpack.config.js

Let's go over the various components in the file.

a. entry and output: tells our server what has to be compiled and from where. Also tells the server where the compiled version should be outputted.

b. mode: this is the mode of our output, which is set to ‘development’ for now. Should be changed to 'production' when the app is build for production.

c. resolve: used so that we can import anything from the src folder in relative paths rather than the absolute ones, same goes for node_modules as well.

d. devServer: this tells the webpack-dev-server what files are needed to be served. Everything from our src folder needs to be served (outputted) in the browser.

e. plugins: here we set what plugins we need in our app. As of this moment we only need the html-webpack-plugin which tells the server that the index.bundle.js should be injected (or added if you will) to our index.html file

If we now run the earlier command, we will see some differences.
```
 npm run webpack
```
npm run webpack output

build folder with index.build.js and index.html

If you start the app now, using the npm start command, you would see a blank screen on the browser, without any content.
```
 npm start
```
Open the developer tools on your browser and you should be able to see the entire code of the index.html file in the Elements tab. Check the Console tab to see Hello World logged over there. The webpack-dev-server took everything from the src folder and outputted it to our browser.
We have configured the app to build everything from the src folder and output it to the browser. It's time to add React and spice things up a little.

Follow the following steps to add React and Babel to the project. Run the following command to add
react and react-dom to the project.

Add react and react-dom as normal dependencies.
```
  npm install react react-dom --save
```
At this moment in our development, if we were to add React code inside our JS file, Webpack will give us an error. It doesn’t know how to compile React inside the bundle.js file.

Modify the index.js file as follows:
```
import React from 'react';
import ReactDOM from 'react-dom';

const HelloWorld = () => {
    return (
        <h1>
            Hello World
        </h1>
    );
}

ReactDOM.render(<HelloWorld />, document.getElementById("root"));
```
Let's start the server now and see what is rendered.
```
npm start
```
webpack error for not having **appropriate loaders for react**
This is where Babel comes to our aid. Babel will tell Webpack how to compile our React code.

Let’s add a bunch of Babel packages to our app as devDependencies.
```
  npm install --save-dev @babel/core @babel/node @babel/preset-env @babel/preset-react babel-loader
```
Some two pointers about these packages.

a. @babel/core: used to compile ES6 and above to ES5.

b. @babel/preset-env: determines which transformations or plugins to use and polyfills (i.e it provides modern functionality on older browsers that do not natively support it) based on the browser matrix you want to support.

c. @babel/preset-react: compiles the React code into ES5 code.

d. babel-loader: a Webpack helper that transforms your JavaScript dependencies with Babel (i.e. will transform the import statements into require ones)
You will probably need to add some styles to the project, as well as have the ability to display images on the webpage.

Go ahead and add these few packages as devDependencies. (Remove the sass-loader and node-sass if know you won't be working with SCSS files).
```
 npm install style-loader css-loader sass-loader node-sass image-webpack-loader --save-dev 
```
a. style-loader: will add styles to the DOM (injects a style tag inside the HTML file).

b. css-loader: lets us import CSS files in our project.

c. sass-loader: lets us import SCSS files in our project.

d. node-sass: compiles SCSS files into normal CSS files.

e. image-webpack-loader: lets us load images in our project.

Next thing to do is add a configuration file for Babel. For this we need to create a file named .babelrc in which we will configure Babel. Create this file in the root directory.

touch .babelrc

Add these lines to let babel-loader know what to use to compile the code.

{
    "presets": [
        "@babel/env",
        "@babel/react"
    ]
}

After these steps, we will need to add something to our project so we can import all sorts of files such as images. We will also need to add a plugin that will let us work with classes and much more. Let us add class properties in our classes. Basically, it will let us work with Object Oriented Programming.

npm install file-loader @babel/plugin-proposal-class-properties --save-dev

Once that is done, we need to make some changes inside webpack.config.js so that Webpack will now use Babel. We’ll also configure Webpack to listen for style files and we are going to change the require statements to import ones.

Change your webpack.config.js to the below code:

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

module.exports = {
    entry: path.join(__dirname, "src", "index.js"),
    output: { path: path.join(__dirname, "build"), filename: "index.bundle.js" },
    mode: process.env.NODE_ENV || "development",
    resolve: { modules: [path.resolve(__dirname, "src"), "node_modules"] },
    devServer: { contentBase: path.join(__dirname, "src") },
    module: {
        rules: [
            { 
                test: /\.(js|jsx)$/, 
                exclude: /node_modules/, 
                use: ["babel-loader"] 
            },
            {
                test: /\.(css|scss)$/,
                use: ["style-loader", "css-loader"],
            },
            { 
                test: /\.(jpg|jpeg|png|gif|mp3|svg)$/,
                use: ["file-loader"] 
            },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.join(__dirname, "src", "index.html"),
        }),
    ],
};

Your webpack.config.js should look like this now.

Match the package.json in your project with the below image.

Another thing that we will have to still add is the @babel/plugin-proposal-class-properties to the .babelrc file. Babel will know how to deal with class properties.
```
{
    "presets": [
        "@babel/env",
        "@babel/react"
    ],
    "plugins": [
        "@babel/plugin-proposal-class-properties"
    ]
}
```
We have reached the end of this tutorial. Now let's run the previous commands and they shouldn't give us any error.
```
npm run webpack

npm start
```
final output on browser

If you have reached this step, make sure to remind yourself that you are awesome. You have learned something new today. Have a great day. Thanks for reading the entire thing.

Here's the link to the Github Repo in case you have faced some issue during the entire process. Feel free to make some tweaks if you find something breaking because of updates to any of the packages.

Photo by Tamara Bitter on Unsplash

Portfolio Website

Anubhav Sarkar — Sun, 21 Feb 2021 17:12:13 +0000

Hello everyone. I took a dig at Next JS along with Tailwind CSS and tried to create a portfolio website for myself with React. The website is hosted at https://anubhav7x.com

Please take a look at it and provide your feedbacks.

Looking forward to some informational reviews.

Thanks in advance 😉😎

GitHub app fails after deploying to production

Anubhav Sarkar — Fri, 28 Aug 2020 17:37:19 +0000

So I have this github app, which manages to update file content and create new files when I use it on my localhost. But as soon as I deploy the app to production, it fails and gives an error saying 403 forbidden "Resource not accessible by integration". Any help on this topic will be hugely appreciated. I have been blocked for a week now and this frustrating.

Update: Managed to get it up and running. Needed a Personal Access Token to be genarated and passed on to the Authorization Header while making the service call.

https://stackoverflow.com/questions/63638496/any-idea-why-my-github-app-manages-to-update-the-file-content-using-the-same-ser