DEV Community: Sagar Barapatre

React to Google Spreadsheets

Sagar Barapatre — Fri, 24 Jun 2022 16:16:38 +0000

Posting data to API's has never been easy. But have you ever used React to post form data to Google Sheets? If not, then this tutorial is for you.

Today, we are going to talk about how to POST form data from React to Google Sheets like REST APIs.

First, Create Your React App.

Just type the below command to setup the project directory.

npx create-react-app react-googlesheets

How to Install Semantic UI

Semantic UI is a framework used to design and develop beautiful and responsive layouts. It has components for Buttons, Containers, Lists, Inputs, and much more.

To install Semantic UI in your React application, use the following command:

npm install semantic-ui-react semantic-ui-css

After it has done installing, open the index.js file and import the following at the top:

import 'semantic-ui-css/semantic.min.css'

Now, run the app using the command npm start.

Let's create some input boxes

Let's create a form and input boxes to get our inputs like name, age, salary, and hobbies from our React App.

Here, we are importing Buttons, Form, Container, and Header from the semantic-ui-react library and creating form fields.

//App.js

import React, { Component } from 'react'
import { Button, Form, Container, Header } from 'semantic-ui-react'
import './App.css';

export default class App extends Component {
  render() {
    return (
      &lt;Container fluid className="container"&gt;
        &lt;Header as='h2'&gt;React Google Sheets!&lt;/Header&gt;
        &lt;Form className="form"&gt;
          &lt;Form.Field&gt;
            &lt;label&gt;Name&lt;/label&gt;
            &lt;input placeholder='Enter your name' /&gt;
          &lt;/Form.Field&gt;
          &lt;Form.Field&gt;
            &lt;label&gt;Age&lt;/label&gt;
            &lt;input placeholder='Enter your age' /&gt;
          &lt;/Form.Field&gt;
          &lt;Form.Field&gt;
            &lt;label&gt;Salary&lt;/label&gt;
            &lt;input placeholder='Enter your salary' /&gt;
          &lt;/Form.Field&gt;
          &lt;Form.Field&gt;
            &lt;label&gt;Hobby&lt;/label&gt;
            &lt;input placeholder='Enter your hobby' /&gt;
          &lt;/Form.Field&gt;

          &lt;Button color="blue" type='submit'&gt;Submit&lt;/Button&gt;
        &lt;/Form&gt;
      &lt;/Container&gt;
    )
  }
}

/*App.css*/
.form{
  width: 500px;
}

.container{
  padding:20px
}

This is what it'll look like:

Now, we are done with the UI. Let's add some functionality.

First of all, let's create states for our four form fields in the constructor.

import React, { Component } from 'react'
import { Button, Form, Container, Header } from 'semantic-ui-react'
import './App.css';

export default class App extends Component {
  constructor(props) {
    super(props)

    this.state = {
       name: '',
       age: '',
       salary: '',
       hobby: ''
    }
  }

  changeHandler = (e) =&gt; {
    this.setState({[http://e.target.name] : http://e.target.value})
  }

  submitHandler = e =&gt; {
    e.preventDefault();
    console.log(this.state);
  }

  render() {
    const { name, age, salary, hobby } = this.state;    (*)
    return (
      &lt;Container fluid className="container"&gt;
        &lt;Header as='h2'&gt;React Google Sheets!&lt;/Header&gt;
        &lt;Form className="form" onSubmit={this.submitHandler}&gt;
          &lt;Form.Field&gt;
            &lt;label&gt;Name&lt;/label&gt;
            &lt;input placeholder='Enter your name' type="text" name = "name" value = {name} onChange={this.changeHandler}/&gt;
          &lt;/Form.Field&gt;
          &lt;Form.Field&gt;
            &lt;label&gt;Age&lt;/label&gt;
            &lt;input placeholder='Enter your age' type="number" name = "age" value = {age} onChange={this.changeHandler}/&gt;
          &lt;/Form.Field&gt;
          &lt;Form.Field&gt;
            &lt;label&gt;Salary&lt;/label&gt;
            &lt;input placeholder='Enter your salary' type="number" name = "salary" value = {salary} onChange={this.changeHandler}/&gt;
          &lt;/Form.Field&gt;
          &lt;Form.Field&gt;
            &lt;label&gt;Hobby&lt;/label&gt;
            &lt;input placeholder='Enter your hobby' type="text" name = "hobby" value = {hobby} onChange={this.changeHandler}/&gt;
          &lt;/Form.Field&gt;

          &lt;Button color="blue" type='submit'&gt;Submit&lt;/Button&gt;
        &lt;/Form&gt;
      &lt;/Container&gt;
    )
  }
}

Here, we have four form fields and their respective states. We also have a changeHandler method to track the change in the input values.

Let's destructure the states in the render method and add their values into the value attribute of the inputs (line *).

The last thing we need is an onSubmit handler. On the form tag, add the onSubmit event and assign the submitHandler method.

Fill out the form and click submit. You will the inputted data in the console.

And that's it – we have a form that takes name, age, salary, and hobby and logs them into the console.

How to Post the data to Google Sheets

Let's change our Google sheets into a REST API.

We will be posting data to Google Sheets as a REST API, and for that, we need to install Axios. It is a library that you can use for sending requests to APIs, just like fetch.

Open a new Spreadsheet by clicking File, then New, and then Spreadsheet.

Name the sheet to name of your choice and save.

Click the share button on the top right of your screen, and edit the permission to public.

Copy the link and go to http://sheet.best and create your free account.

Create a new connection and paste your copied URL from the Google Sheets in the connection URL box.

Click on connect. You'll be redirected to your connections page. Here, you can see all your connections. Click on the details of your new connection.

Copy the CONNECTION URL. This URL will be used as the endpoint for sending POST Requests.

Now, let's install Axios. Type

npm install axios

in your terminal to install the package.

After it has been installed, import it at the top of your file. We will make the POST Request in the submitHandler function.

//Submit Handler Method
submitHandler = e =&gt; {
    e.preventDefault();
    console.log(this.state);

    http://axios.post('url', this.state)
    .then(response =&gt; {
      console.log(response);
    })
  }

Replace the submitHandler function with the code above. Here, we are using Axios to post the data to the URL and get back the response in the console using the .then keyword.

Paste the copied CONNECTION URL endpoint from http://sheet.best and replace it with the URL in http://axios.post('url').

// Submit Handler Function
submitHandler = e =&gt; {
    e.preventDefault();
    console.log(this.state);

    http://axios.post('https://sheet.best/api/sheets/a6e67deb-2f00-43c3-89d3-b331341d53ed', this.state)
    .then(response =&gt; {
      console.log(response);
    })
  }

Now, open up Google Sheets and fill up the first columns, that is name, age, salary, and hobby. Please fill them out carefully, or else it will not work. It should be case sensitive.

Now, run your React app and fill in the input fields. You'll see that the data is getting populated into your Google Sheets one by one.

That's all folks. Now you know how to turn Google Sheets into a REST API. Now, you store your data in Google Sheets with a React application.

Here's the github repo for the entire code - https://github.com/sagar-barapatre/React-to-Google-Spreadsheets

Code Commenting : Code Tells You How, Comments Tell You Why

Sagar Barapatre — Thu, 24 Feb 2022 14:30:05 +0000

// This is a blog, written with a motive for better usability of code comments.

// Enjoy Reading

Do we need to comment our code 🤔 ?

If you are a developer then you must have a habit of understanding small code and snippets easily.

The practise of distributing small, usually single-line annotations across your code is known as code commenting. These notes are referred to as “comments.”

Some people love ❤️‍🔥 comments and write them everywhere, some people hate 😵‍💫 them and don’t write them at all. You should be in the middle.

Comments have no influence on your program, but they are extremely helpful to individuals who are reading your code.

So when it’s NOT OK 🥲 to use Comments ?

😒 Stating the Obvious :

We can easily understand small declarations and states without comments. And when updating we could forget to update the comment, so better not to write that comment.

🧐 Explaining Unclear Code :

We should adopt better naming conventions that help us gain better readability.

⛔️ Commented Out Code :

If the part of the code is being redundant then it shouldn’t be present anymore in the Code files.

💥Noise Comments :

Sometimes you see comments that are nothing but noise. They restate the obvious and provide no new information.

// No, really? Or how about this: /** The day of the month. */

📍Position Markers :

Sometimes programmers like to mark a particular position in a source file.

//////// RETURN HERE AFTER COMPLETING ///////

So when it’s OK 🤩 to use Comments ?

🔖 Legal Information :

Whenever some legal information related to licensing or copyright has to be conveyed.

🖇 Informative Comments:

Sometimes, it is useful to provide basic information about a function in the form of comments.

📍Non Trivial Comments : Sometimes a comment goes beyond just useful information about the implementation and provides the intent behind a decision.

As already introduced before, the developers could have varying experience levels. So when using more complex code constructs such as regular expressions or date parsers. It makes sense to explain the intended behavior.

⛔ ️Warning of Consequences:

Sometimes it is useful to warn other programmers about certain consequences.

🏁 Amplification : A comment may be used to amplify the importance of something that may otherwise seem inconsequential

👌 Use CODA for any documentation purpose

There is nothing quite so helpful and satisfying as a well-described public API. Coda comes with building blocksーlike pages that talk to each other, and buttons that take actionーso anyone can make a doc that can evolve to feel like an app.

Conclusion

A Good code should read like a story, not a puzzle

Commenting involves placing Human Readable Descriptions inside of computer programs detailing what the Code is doing.

Proper use of commenting can make code maintenance much easier, as well as helping make finding bugs faster. Further, commenting is very important when writing functions that other people will use.

Remember, well documented code is as important as correctly working code.

BONUS : You can refer this extension if you want better structuring of your existing comments.

How I used cron to automatically simulate git activity

Sagar Barapatre — Wed, 23 Feb 2022 14:31:10 +0000

A Crontab (CRON TABle) is a schedule of “cron entries” or in other words executable CLI commands to be run at specified intervals. You must be asking yourself: Why do I need these exactly?

In this tutorial I will take you through the basic usage of crontab, which is simply a list of commands that will automatically run from the time of a computer boot until it is told to stop. We will set crontab to execute three simple git commands:

git add
git commit
git push

Before we dive into to the code, I want to discuss two possible implementations for automating git commands via use of crontab

The Two Approaches

Git Commands in Crontab Approach

Inserting git commands directly into a crontab:
To explain this concept open a new terminal window and in the command line interface, type crontab -e
You should see a window like this pop up:

Ok Great! Make sure to press i; and now you can freely add commands.
Any command that would typically execute through the command line will run here too. You need to specify how often you’d like the command to execute. To discuss this syntax in detail let’s examine the below chart:

According to the illustration above- we could simply insert the chain of commands seen below in grey to indicate that:
At the forth minute, of the second hour, of every day, of every month,
we would like to git add, commit, and push a particular repository.
For more cron syntax click here!
It would look something like this:

4 2 * * * cd path/to/your/repository && git add . && git commit -m”another commit” && git push origin master

But this approach is too boring to even discuss… Instead, let’s write a python script that will execute these git commands for us. It will be a great way to introduce you to an awesome python module called GitPython and teach you how to run scripts that use dependancies via the crontab.

For this tutorial’s purposes I will assume that you already know how to set up a new virtual environment and that you’re fully capable of installing additional dependencies into this virtual environment.

ok… let’s get started with the script approach.

The Script Approach: in 15 very short steps

Set up a directory in your dev folder called cronGit (or really any name you want… just keep track because we will use paths later in this tutorial)
Set up a new virtual environment, place it in this new directory, and make sure to add GitPython module as a dependency into this environment.
For this tutorial we will use GitPython 2.1.11 you may add it using (venv) $ pip install Gitpython == 2.1.11
Create a .gitignore file and don’t forget to add venv (or any other name used for the virtual environment)
Create a new file called index.py in this root directory
Create a new directory inside cronGit called autoGitActivity, or whatever you’d like.
Inside this autoGitActivity folder let’s create a new empty text file and call it activityTracker.txt
Now we must initialize a git repo inside this autoGitActivity folder we created, since this is where we will set a routine execution of git add, commit, and push commands… As a reminder you want to git init, and then git remote add origin <link>

Great we are ready to write some code!!

Go back into cronGit directory using cd ..
Open index.py with and add the following code at the very top of the file

from git import Repo

Here we import the PythonGit module that will help us easily execute common git commands.

Set up general variables right beneath the top import statement like so:

working_tree_dir = '/Users/Ospiegel/Development/cronGit/autoGitActivity'
file = "autoGitActivity/activityTracker.txt"
repo = Repo(working_tree_dir)

working_tree_dir: The absolute path/location of the repository you just initialized in step 7, the one you would like to auto-push.

file: file will be the path to the text file we will add lines for the sake of demonstration

repo: repo is actually a Repo class object that comes with the GitPython module we imported that takes a path as an argument as shown above.

Write simple function that will slightly alter the text file we created

def alter_file(file):
    with open(file, "a") as f:
        f.write("new line\n")

The function will take in a file path to a text file (as a string) and write a new line in it with the text ‘new line’ (how original).

Write a function that will execute git add, commit, and push commands in the repository we previously set up

def git_activities(repo):
    if len(repo.untracked_files):    
        repo.git.add(A=True)
        repo.git.commit('-m', 'initial commit')
        repo.git.push('origin', 'HEAD:refs/for/master')

The

function accepts a Repo object (like the one we already declared) and first checks to see if there are any untracked files. If there are, it will stage (add) all changes/additions, subsequently it will commit with a message, and finally it will push to the master.

Now we simply invoke the functions we wrote at the bottom of the file

alter_file(file)

git_activities(repo)

We can save and exit our python script.

Now let’s open a new terminal window and once again type crontab -e
Press i to edit

We would like to add a command that will run this python script we just wrote, sounds easy enough right?

Well not so fast!

Our python script has extra dependancies and we have to run this command through the virtual environment we set up. To do this we will use this chained command:

SHELL=/bin/bash
* * * * * cd development/cronGit/venv && source bin/activate && cd .. && python index.py

* * * * * five stars separated by spaces indicate that will run this every minute, every hour, every day, every month, at any day of the week…
Then we have a chained command that is separated with &&
First tread into the virtual environment location: cd development/cronGit/venv
Activate the venv: source bin/activate
Tread one back out of the venv location back into where we saved our index.py file: cd ..
Lastly run our pythin script : python index.py

After pasting the command into the crontab; it should look like this:

You may now press esc and then follow it up with typing :wq to exit

OK you’re all set up!
You now look like a super active git user, who commits and pushes every minute of the day. You also learnt about crontab recurring commands, and maybe a thing or two about the GitPython module.

link to git repo here

Do you want a better understanding of Buffer in Node.js? Check this out.

Sagar Barapatre — Fri, 24 Dec 2021 14:25:09 +0000

Are you always mystified, like me, whenever you come across words like Buffer, Stream, and binary data in Node.js? Does that feeling make you shrink from understanding them, thinking they are not meant for you but only for Node.js gurus and package developers to understand?

Indeed, those words could be very intimidating, especially when you’re coming into web development with Node.js without any CS degrees.

Sadly, many tutorials and books will jump straight to teaching how to develop web applications with Node.js packages without letting you understand the core features of Node.js and why they exist. And some will brazenly tell you that you don’t need to understand them because you might never work with them directly.

Well, true, you might never work with them directly if you chose to remain an average Node.js developer.

However, if mysteries get you really curious, and you’ll stop at nothing to satisfy your curiosity, and if you want to take your Node.js understanding to the next level, then you really want to dig deeper to understand the many core features of Node.js, like Buffer, for example. And that’s exactly why I’m writing this piece — to help us demystify some of these features and take our Node.js learning to the next level.

When introducing Buffer, the official Node.js docs states in part…

... mechanism for reading or manipulating streams of binary data. The Buffer class was introduced as part of the Node.js API to make it possible to interact with octet streams in the context of things like TCP streams and file system operations.

Hmmm, unless you had prior knowledge of all the words in the above sentences, they are probably just a bunch of jargon. Let’s try to simplify that a bit by rephrasing it, so we can have a clear focus and not be distracted by the many bells and whistles in there. Extracting from that introduction, we could safely say:

The Buffer class was introduced as part of the Node.js API to make it possible to manipulate or interact with streams of binary data.

Now that’s simpler right? But… Buffer, streams, binary data… still many big words. Well, let’s try to tackle these big words from the last to the first.

Binary data, what’s that?

You probably already know that computers store and represent data in binaries. Binary is simply a set or a collection of 1s and 0s. For example, the following are five different binaries, five different sets of 1s and 0s:

10, 01, 001, 1110, 00101011

Each number in a binary, each 1 and 0 in a set are called a Bit, which is a short form of Binary digIT.

To store or represent a piece of data, a computer needs to convert that data to its binary representation. For example, to store the number 12, a computer needs to convert 12 to its binary representation which is 1100.

How does a computer know how to do this conversion? Well, it’s pure math. It’s the simple binary numeral system we learned in basic math — expressing a number in the base-2 numeral system. Computers understand that math.

But numbers are not the only data type we work with. We also have strings, images, and even videos. Computers know how to represent all types of data in binaries. Let’s take strings, for example. How will a computer represent the string “L” in binaries? To store any character in binaries, Computers will first convert that character to a number, then convert that number to its binary representation. So for the string “L”, computers will first convert L to a number that represents L. Let’s see how.

Open your browser console and paste the following code snippet and then hit enter:"L".charCodeAt(0). What did you see? The number 76? That is the number representation or Character Code or Code Point of the character L. But how does a computer know what exact number will represent each character? How does it know to use the number 76 to represent L?

Character Sets

Character Sets are already defined rules of what exact number represents each character. We have different definitions of these rules.The very popular ones include Unicode and ASCII. JavaScript plays really well with Unicode Character Sets. In fact, it is the Unicode in your browser that states that 76 should represent L.

So we’ve seen how computers represent characters in numbers. Now, the computer will, in turn, represent the number 76 to its binary representation. You might think, well, just convert 76 to the base-2 numeral system. Not so fast!

Character Encoding

Just as there are rules that define what number should represent a character, there are also rules that define how that number should be represented in binaries. Specifically, how many bits to use to represent the number. This is called Character Encoding.

One of the definitions for Character Encoding is the UTF-8. UTF-8 states that characters should be encoded in bytes. A byte is a set of eight bits — eight 1s and 0s. So eight 1s and 0s should be used to represent the Code Point of any character in binary.

To understand this, as we mentioned earlier, the binary representation of the number 12 is 1100. So when UTF-8 state that 12 should be in eight bits, UTF-8 is saying that a computer needs to add more bits to the left side of the actual base-2 representation of the number 12 to make it a byte. So 12 should be stored as 00001100. Makes sense?

Therefore, 76 should be stored as 01001100.

This, my friends, is how computers store strings or characters in binaries. Likewise, computers also have specified rules on how images and videos should be converted or encoded and stored in binaries. The point here is, computers stores all data types in binaries, and this is known as binary data.

If you’re super interested in the nitty-gritty of Character Encoding, you might like this gentle and detailed introduction.

Now we understand what binary data is, but what are streams of binary data from our introduction to buffer?

Stream

Stream in Node.js simply means a sequence of data being moved from one point to the other over time. The whole concept is, you have a huge amount of data to process, but you don’t need to wait for all the data to be available before you start processing it.

Basically, this big data is broken down and sent in chunks. So from the original definition of a buffer (“streams of binary data… in the context of… file system”) this simply means binary data being moved in the file system. For example, moving the texts stored in file1.txt to file2.txt.

But how exactly does buffer help us interact with or manipulate binary data while streaming? What exactly is this buffer btw?

Buffer

We’ve seen that a stream of data is the movement of data from one point to the other, but how exactly are they moved?
Typically, the movement of data is usually with the intention to process it, or read it, and make decisions based on it. But there is a minimum and a maximum amount of data a process could take over time. So if the rate the data arrives is faster than the rate the process consumes the data, the excess data need to wait somewhere for its turn to be processed.

On the other hand, if the process is consuming the data faster than it arrives, the few data that arrive earlier need to wait for a certain amount of data to arrive before being sent out for processing.

That “waiting area” is the buffer! It is a small physical location in your computer, usually in the RAM, where data are temporally gathered, wait, and are eventually sent out for processing during streaming.

We can think of the whole stream and buffer process as a bus station. In some bus stations, a bus is not allowed to depart until a certain amount of passengers arrive or until a specific departure time. Also, the passengers may arrive at different times with different speed. Neither the passengers nor the bus station has control over passengers’ arrival at the station.

In any case, passengers who arrive earlier will need to wait until the bus station decides to send the bus on its way. While passengers who arrive when the bus is already loading or when the bus has already departed need to wait for the next bus.

In whatever the case may be, there is always a waiting place. That is the Buffer to Node.js! Node.js can’t control the speed or time of data arrival, the speed of the stream. It only can decide when it’s time to send out the data. If it’s not yet time, Node.js will put them in the buffer — the “waiting area” — a small location in the RAM, until it’s time to send them out for processing.

A typical example where you could see buffer in action is when you’re streaming a video online. If your internet connection is fast enough, the speed of the stream will be fast enough to instantly fill up the buffer and send it out for processing, then fill another one, and send it out, then another, and yet another… till the stream is finished.

But if your connection is slow, after processing the first set of data that arrived, the video player will display a loading icon, or display the text “buffering”, which means gathering more data, or waiting for more data to arrive. And when the buffer is filled up and processed, the player shows the data, the video. While playing that, more data will continue to arrive and wait in the buffer.

If the player is done processing or playing the previous data, and the buffer is not yet filled up, the text “buffering” will be displayed again, waiting to gather more data to process.

That is Buffer!

From the original definition of a buffer, it shows that while in the buffer, we can manipulate or interact with the binary data being streamed. What kind of interaction could we possibly have with this raw binary data? The Buffer implementation in Node.js provides us with a whole list of what is doable. Let’s see some of them.

Interacting with a Buffer

It is even possible to create your own buffer! Aside from the one Node.js will automatically create during a stream, it is possible to create and manipulate your own buffer. Interesting right? Let’s create one!

Depending on what you want to achieve, there are different ways to create a buffer. Let’s see some.

// Create an empty buffer of size 10. 
// A buffer that only can accommodate 10 bytes.
const buf1 = Buffer.alloc(10);
// Create a buffer with content
const buf2 = Buffer.from("hello buffer");

Once your buffer has been created, you can start interacting with it

// Examine the structure of a buffer
buf1.toJSON()
// { type: 'Buffer', data: [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ] }
// an empty buffer
buf2.toJSON()
// { type: 'Buffer',
     data: [ 
       104, 101, 108, 108, 111, 32, 98, 117, 102, 102, 101, 114 
     ] 
   }
// the toJSON() method presents the data as the Unicode Code Points of the characters
// Examine the size of a buffer
buf1.length // 10
buf2.length // 12. Auto-assigned based on the initial content when created.
// Write to a buffer
buf1.write("Buffer really rocks!") 

// Decode a buffer
buf1.toString() // 'Buffer rea'
//oops, because buf1 is created to contain only 10 bytes, it couldn't accommodate the rest of the characters
// Compare two buffers

There’s a whole lot of interactions we could have with a buffer. Head on to the official docs to play more with these methods.

Finally, I’ll leave you with this little challenge: Go read through the source of zlib.js, one of the core libraries of Node.js, to see how it’s leveraging the power of buffer to manipulate streams of binary data. These turn out to be gziped files. As you read, document what you learn and kindly share with us here in the comments.

I hope this introduction helped you get a better understanding of Node.js Buffer.

If you feel like I’ve done a nice job, and that others deserve a chance to see this, kindly clap for the article to help spread a better understanding of Buffer in our Node.js community.

If you have a question that hasn’t been answered or you have a different understanding of some of the points here, feel free to drop in comments here or via Twitter.

Tutorial: How I deploy my React app to production on Heroku

Sagar Barapatre — Tue, 21 Dec 2021 03:44:37 +0000

Create-react-app and Heroku are great tools for building highly performant apps, but the React and Heroku docs have very little information on how to deploy React production builds to heroku. I will guide you through deploying a simple production-ready React app to Heroku. These steps will work for any React app built with create-react-app.

Step 1: Create a React App

First, you’ll need to create a React app using the create-react-app generator. Make sure you have installed Node and npm first.

In the terminal, enter the following to generate a new react app (and replace hello-world with your app name) :

$ npx create-react-app hello-world 
$ cd hello-world

Open the hello-world repository in your preferred text editor. If you’re using atom, simply type atom . in the terminal to open your repo. Here is what the repo will look like:

hello-world
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── registerServiceWorker.js

Step 2: Add your own app icon to the Public folder

You can convert any PNG into a favicon.ico file here: https://www.favicon-generator.org/

Then delete the existing favicon.ico file from the Public folder and add your own favicon.ico file to the Public folder. If you don’t add your own icon, the app will default to the React icon.

Step 3: Create an Express JS server to serve your production build

In your repository, create a file called server.js:

touch server.js

In server.js, copy/paste the following code:

//server.js
const express = require('express');
const favicon = require('express-favicon');
const path = require('path');
const port = process.env.PORT || 8080;
const app = express();
app.use(favicon(__dirname + '/build/favicon.ico'));
// the __dirname is the current directory from where the script is running
app.use(express.static(__dirname));
app.use(express.static(path.join(__dirname, 'build')));
app.get('/ping', function (req, res) {
 return res.send('pong');
});
app.get('/*', function (req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
app.listen(port);

This code creates a special Node JS server that can serve minified/uglified JS. /ping is a meaningless path you can use to test that the server is working.
Make sure you add express, express-favicon, and path to your dependencies:

yarn add express express-favicon path

In your package.json file, change the start script to the following:

start: "node server.js"

Step 4: Create a React production build

Heroku now runs the build command automatically when you deploy, but it’s a good idea to test the production build locally before deploying (especially your first time).

You can create a production build locally by running this command in your terminal:

yarn build

Then run yarn start to start the production server locally.

Step 5: Prevent source code from being deployed

In your repository, create a file called .env :

touch .env

Then add the following to the .env file to prevent source maps from being generated.

#.env
GENERATE_SOURCEMAP=false

Source maps allow you to access your source code in the production environment, which makes debugging easier. However, source maps also allow anyone from the public to view your source code.

Note: if you are having trouble debugging an issue in production but you want to keep your source code private, you can create a separate branch, remove that line from the .env file, and deploy that branch to a secret heroku url.

Step 6: Deploy to heroku

If you don’t already have a heroku account, create one here: https://signup.heroku.com/
In your command line, run the following:

heroku login

You will need to type in your heroku credentials to the terminal. Once you have successfully entered your heroku credentials, run the following in your terminal to create a new deployed app:

heroku create sample-react-production-app

Replace sample-react-production-app with your own app name.

Then push your app build to heroku with the following git in your terminal:

yarn install
git add . 
git commit -m "initial commit"
heroku git:remote -a sample-react-production-app
git push heroku master

These commands install your dependencies, initialize git, and connect your repo to the remote repository hosted by heroku.

Note: if you already initialized your git before running heroku create [app-name] , then you don’t need to run heroku git:remote -a [app-name] .

Congrats! Now you’ve completed all the necessary steps to deploy a React build. To view your app, run the following in the terminal:

heroku open