# 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](https://github.com/facebook/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.

%[https://codesandbox.io/s/env-variables-o4zf6]

**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](https://master-redux.yogeshchavan.dev/) 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](https://www.youtube.com/watch?v=2zaPDfCKAvM) from scratch with stripe integration for accepting payments and deploy it to the production.

[<img src="https://gist.github.com/myogeshchavan97/98ae4f4ead57fde8d47fcf7641220b72/raw/c3e4265df4396d639a7938a83bffd570130483b1/banner.jpg">](https://bit.ly/3w0DGum)

**Want to stay up to date with regular content regarding JavaScript, React, Node.js? [Follow me on LinkedIn](https://www.linkedin.com/in/yogesh-chavan97/).**

[<img src="https://cdn.buymeacoffee.com/buttons/default-yellow.png" >](https://www.buymeacoffee.com/myogeshchavan97)