10 things-to-do, Before you publish your CRA - Part 2

Hey everyone, I wrote a blog some time ago where I talked about the 5 practices to follow before publishing your create-react-app on the web. Here's the link to it, if you haven't read it yet.

Previously in part 1, we covered the following topics :

1. Fixing the favicon
2. Customizing title & description.
3. Cleaning the unused files.
4. Removing console.log statements.
5. Checking Responsiveness of your Application.

Today I will be talking about the next 5 practices to be followed. Let's dive right into it, without further ado.

6. Protecting your secrets.

When we are creating our app, there are certain things that we want to hide. For example, our API keys, config files, the URL of our backend, and many more. The cost of leaving those out in the open can be very high. To help us with this comes environment variables.

To do -

• Create a .env.local file, at the root of your project, and put all your secrets there in the format given below -

  REACT_APP_SECRET_NAME= 'theValueOfYourSecret'
  

• And to access it in your code, you can use process.env.REACT_APP_SECRET_NAME, like the example given below -

  const mySecret = process.env.REACT_APP_SECRET_NAME
  

• Include the .env.local file to your .gitignore, if it isn't already.

Note: It is important to prefix your environment variable name, with REACT_APP, or it won't work. Also when deploying the app to netlify or any other hosting service, make sure to check the build setting, and add the environment variables there.

7. Running Production Build -

Let's briefly talk about the differences in development and production builds.

The development build as the name suggests is used for development purposes. The code written by us in a beautiful, modularized way is a part of the development build.

On the other hand, production build is an ugly, minimized version of our code, with all the javascript files jumbled together, to make the loading of our files on the client's end, much faster. It is very important, to make sure, that we are using production build for hosting.

To do -

• Run npm run build or yarn build in your terminal to initiate the build process. In a few minutes or seconds, you will see a build folder in your directory. Deploy this folder for hosting your website.
• Alternatively, if you are using netlify, vercel, or some other hosting service, you can choose to deploy your development build and let them handle the rest.
• While using Netlify, you can see the build command, which runs automatically.

8. Spell check for the website.

Incorrect Grammar, misspelled words are sometimes, a huge turn-off for people. It is really necessary, to do a proper spell check throughout your website, before hosting it and presenting it to the world.

To do -

• Go through all the files, and check for mistakes that you might have done. Google, in case of confusion.
• You can release alpha and beta versions, to let selected people go through your website and help you check for bugs, spelling mistakes, etc.

9. Optimizing the web application

It is very important to optimize our application, to provide users a seamless experience while using our web application.

The best way is to use Lighthouse, an open-source tool, for auditing the quality of the website. Lighthouse is present in chrome dev tools, and you can go through its functionalities and uses here.

To do -

• Run a lighthouse check against your webpage, check all the suggestions, and implement those in your application.
• Another way for optimization is by checking the size of images used on your website. You can compress large files, by some online image compressor like this, which will help your website load much faster.

10. Update Readme.md file.

The readme of a project helps others understand its use, it's working, and the technologies it uses. If you are presenting your project to a company, having a readme included in every project is a big bonus.

Things to include in your Readme.md file -

• Name, Description of your project.
• Tech stack used.
• Features of your application.
• Live link.
• Screenshots and Videos to explain the working of the application.
• Test credentials for users.
• Instructions for running the app in the local environment.

What's next?

These were the best practices I use before publishing my your create-react-app. Comment down below and let me know if I have missed something out. Following this checklist will surely, help you make better apps, and help make the web world a better place. ;p

If you liked the blog, Give me some reactions as appreciations and share⏩ it with other developers too. And Hey, I am always up for a web development discussion, so you can connect with me on Twitter or Linkedin.

Stay tuned for more of these amazing blogs! Meanwhile, you can check out my other blogs here.