Very Useful Features Provided By Create React App You Might Not Know

In this article, we will explore the lesser-known but very useful features provided by create-react-app.

So let's get started!

Serve application on HTTPS instead of HTTP

Sometimes we need to test our app on HTTPS to check if all the APIs are working properly before deploying to production.

Create-react-app provides an easy way of doing that.

Create a .env (dot env) file in your project folder and add HTTPS=true inside it like this:

HTTPS=true

and restart your app by running yarn start or npm start command and now your entire application will be served on HTTPS.

Use absolute paths for imports

In every application, we have import statements where we have to come out of the current folder to reach another file like this:

import { login } from '../actions/login';
import profileReducer from '../reducers/profile';

So we have to check which folder we are in and then add those numbers of double dots to import another file. Create-react-app makes it easy to handle that.

Create a new file jsconfig.json in your project folder and add the following code inside it:

{
 "compilerOptions": {
   "baseUrl": "./src"
 }
}

Here we specified the base folder where all your files are present. (mostly it’s the src folder in the React application).

So now we can simplify the above imports as shown below:

import { login } from 'actions/login';
import profileReducer from 'reducers/profile';

With this configuration, it will take src as a base URL now, so we only need to specify the folder path starting inside the src folder as we've done in the above code.

This will avoid adding extra dots for deeply nested paths.

Easily access environment variables in React

Environment variables are important because they allow us to keep private information secure. It can be a username or password or API key.

They also allow us to supply our app with different data values based on the environment (dev, staging, prod, etc).

Create-react-app allows us to read environment variables without using any external library.

To create environment variables in React, create a new .env (dot env) file and declare the environment variable inside it like this:

REACT_APP_API_BASE_URL=environment_variable_value
REACT_APP_PASSWORD=your_password

It’s important to start your environment variable name with REACT_APP_ so create-react-app will be able to read it.

Once you create a .env file with your variables, it will be available in your React app inside the process.env object.

process.env.REACT_APP_API_BASE_URL
process.env.REACT_APP_PASSWORD

Check out the below Code Sandbox Demo to see it in action.

Note: You should not push the .env file to your git repository for privacy reasons so make sure to add the .env entry in your .gitignore file.

Thanks for reading!

Check out my recently published Mastering Redux course.

In this course, you will learn:

• Basic and advanced Redux
• How to manage the complex state of array and objects
• How to use multiple reducers to manage complex redux state
• How to debug Redux application
• How to use Redux in React using react-redux library to make your app reactive.
• How to use redux-thunk library to handle async API calls and much more

and then finally we'll build a complete food ordering app from scratch with stripe integration for accepting payments and deploy it to the production.

Want to stay up to date with regular content regarding JavaScript, React, Node.js? Follow me on LinkedIn.

Comments

[Jonathan Irvin]

It's important to note that the process.env.REACT_APP_* variables are best used for buildtime changes and work great in CI. For runtime changes, you probably should use some feature flags from an endpoint or maybe state managed feature flags.

[Yogesh Chavan]

Thanks for adding that @sublimegeek