DEV Community

Cover image for 5 Things to do before making the build for Production. (React JS)
Atul Bhatt
Atul Bhatt

Posted on

5 Things to do before making the build for Production. (React JS)

This article is not something you might not already know but maybe you might not have it all listed in a one place. There can be more things that I'll surely be missing in this article which I would like you to mention down in the comments so that I can compile another part to this article. And this is a beginner level post.

So let's start on listing the things that I feel one should do before pushing their production build. These are the things that I have used for the react project I have built but they are definitely the points which can surely be helpful in other projects.

1. Clearing all the console.logs that are absolutely not intended for the users. And it's rare that console.logs are there for users.

2. Remove all the commented code which doesn't serves any purpose or in the end is just misleading. Comments are meant for giving extra context to why something has been done not the other way around.

Screenshot (309)

The above screenshot depicts how there is a useless console log which the developer might have used for the testing purpose which should be removed once everything is wrapped up in development and the project is ready for getting into production.

Another thing worth keeping note is the commented code which serves no purpose in the end.

3. Removing all the unused npm packages and libraries that are installed.

4. Deleting all the unused files that are just clogging up.

It might feel overwhelming to find all the unused packages and files manually but don't you worry.
As the diamond cuts the diamond, in the same way we will use another package to remove the dead files.

You can follow the packages below:
depcheck
unimported

Screenshot (119)

5. Check how the build works by serving the build in react. I know that I used to create a build and then push it to staging server to check how it will behave there because I wasn't aware of the fact that React offers this functionality. It's always good to check your build before pushing it to the server.

Screenshot (310)

So basically this is not about improving the code or optimizing it. These things go hand in hand when you are doing development.

The goal🎯 of this article is primarily on giving the finishing touch to your React Web App before making it live in the production.

I hope this article was helpful to you. I would be more than happy to receive your feedback on this article. Thanks for your precious time reading this. Stay tuned for more insightful reading by me.😊

Top comments (14)

Collapse
 
arminops profile image
Armin Tor

What if we have a single logger service and check the environmnt?

Collapse
 
atulbhattsystem32 profile image
Atul Bhatt

Can you please elaborate?

Collapse
 
arminops profile image
Armin Tor

For number 1. We don't want to log in our console in production. We can create a singleton service and check the environment before logging. By this we followed SRP too..

Thread Thread
 
atulbhattsystem32 profile image
Atul Bhatt

Nice one. Can you please write an article on it. Or maybe I'll do it when I'm done curating the other articles on my list πŸ˜ƒ

Thread Thread
 
arminops profile image
Armin Tor

I'd love to, but am so busy these days... I'm sure you'll write a good one until i want to start :)))

Collapse
 
manisha11dev profile image
manisha-11-dev

Thanks much for posting this.

Collapse
 
atulbhattsystem32 profile image
Atul Bhatt

Welcome Manisha.πŸ˜€
Thanks for commenting. It keeps me fueled up for writing more of such posts.

Collapse
 
manisha11dev profile image
manisha-11-dev

Sure, appreciate such endeavours always and would love to contribute too.

Collapse
 
xtender profile image
π™ΏπšŠπšžπš• π™ΊπšŠπš–πš–πšŠ

I'm pretty sure that 1,2 and 3 is been done by webpack (or the responsible plugin) I mean who on earth would delete ALL comments before a production build in ALL files, the comments are there for (almost) a good reason?

Collapse
 
atulbhattsystem32 profile image
Atul Bhatt

Yes Paul. The production build is optimized and the points 1,2, and 3 are handled. However, removing those files that are not in need is also helpful in the sense that if other devs get through your project they don't have to scratch their head to find the reason for their existence. And having these processes already done may improve the time it takes to make the build.

But you are spot on with your pick. Thanks for that.
Do you have any point that you would like to add which we as a dev can do?

Collapse
 
ch1zo profile image
chizo nwazuo

Super useful tips! I was just going to build an app for production and didn't even know some of these. Thank you...

Collapse
 
atulbhattsystem32 profile image
Atul Bhatt

I'm super glad to know that the post reached to someone who really was in the same stage. Happy production deployment.πŸ˜„

Collapse
 
walfredocarneiro profile image
Walfredo Carneiro

Super useful tips! Thank you!

Collapse
 
momosetti profile image
Momo Setti

for 1 and 2 steps, you could use linting rule for avoid getting that.