DEV Community

loading...
Cover image for Very Useful Features Provided By Create React App You Might Not Know

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

Yogesh Chavan
Full Stack Developer | JavaScript | React | Nodejs. Subscribe to get weekly newsletter with amazing tips, tricks and articles directly in your inbox https://yogeshchavan.dev/
Originally published at blog.yogeshchavan.dev ・3 min read

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
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

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"
 }
}
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (2)

Collapse
sublimegeek profile image
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.

Collapse
myogeshchavan97 profile image
Yogesh Chavan Author

Thanks for adding that @sublimegeek