10 More Things You Didn’t Know About Create React App
Tags: javascript, react
Published: 2018-12-04 11:54:25

---
title: 10 More Things You Didn’t Know About Create React App
published: true
tags: javascript, react 
canonical_url: https://www.telerik.com/blogs/10-more-things-you-didnt-know-create-react-app
---

Editors note: Last month we published another article on "[5 Things I Didn't Know about Create React App](https://dev.to/progresstelerik/5-things-i-didnt-know-about-create-react-app-49nj)" - check that one out too for more tips and tricks with React!

* * *

Learn new tips and tricks for Create React App to make you more productive with tooling and help you build your apps faster.

Create React App is a tool developed for setting up React applications. It saves its users from time consuming-configuration and setup. Using Create React App, users can set up and run single-page React applications in minutes.

There’s a lot this ingenious tool can do for its users. Some features are quite popular, like the fact that it requires no setup, and that users can create a fully fledged application by running a single command. But this tool can do much more than even some of its most faithful users know about.

In this article, we’ll go through a list of ten things you probably don’t know about Create React App. Some of them may come as a surprise to you. If you find that you know most of the things listed here, then you should keep an eye out for the few that are new to you — they might really come in handy.

## 1. Service Workers Support

Create React App has out-of-the-box support for service workers. That means your application can be a Progressive Web Application that works offline and uses a cache-first strategy. In the latest installment of [Create React App (version 2)](https://dev.to/progresstelerik/hello-create-react-app-20-316-temp-slug-3014493), service workers are opt-in only.

To make use of service workers in your production build, you have to register the service worker in your `index.js` file. In your `src/index.js` file, look for the following line:

```
// If you want your app to work offline and load faster, you can change  
// unregister() to register() below. Note this comes with some pitfalls.  
// Learn more about service workers: http://bit.ly/CRA-PWA  
serviceWorker.unregister();
```

Change the `serviceWorker.unregister()` to `serviceWorker.register()`. Opting in to use a service worker makes your application an offline-first Progressive Web Application with cached assets and ability to add to the home screen for mobile users.

## 2. CSS Autoprefixing

To ensure cross-browser support, Create React App adds vendor prefixes to an application’s CSS. This reduces the stress of manually adding vendor prefixes while styling components. An example of this will be the `flex` display property. The snippet below will be transformed from this:

```
.App {  
display: flex;  
flex-direction: row;  
align-items: center;  
}
```

To this after minification:

```
.App {  
display: -webkit-box;  
display: -ms-flexbox;  
display: flex;  
-webkit-box-orient: horizontal;  
-webkit-box-direction: normal;  
-ms-flex-direction: row;  
flex-direction: row;  
-webkit-box-align: center;  
-ms-flex-align: center;  
align-items: center;  
}
```

You can control, restrict, and target support browsers by changing the `browserlist` property in your `package.json` file using the [Browserslist](https://github.com/browserslist/browserslist#readme) specification.

Read more on autoprefixing in Create React App [here](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#post-processing-css).

## 3.SASS Support

With Create React App v2, support for CSS preprocessor has been added. Finally we have nesting and mixins supported out of the box in Create React App. In previous versions of Create React App, to achieve something similar to nesting, we made use of component composition. To get started using SCSS in your project, install [`node-sass`](https://github.com/sass/node-sass), then rename all `css` files to `scss`.

You can read more about getting started with SCSS in Create React App [here](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-sass-stylesheet).

## 4. Code Splitting Using Dynamic Imports

In the process of building our application, we can end up with bloated build files. Code splitting as a technique can help reduce the size of build files. Create React App supports the [Dynamic import](https://github.com/tc39/proposal-dynamic-import) proposal out of the box. Using dynamic imports, bundle sizes can be reduced substantially.

Dynamic imports are asynchronous so they can be used with `Async/Await`. Using this technique, components are imported on demand and will be built separately from your main bundle file, thus reducing the bundle size.

The snippet below shows how to utilize the `import()` feature:

```
import React from 'react'  
  
export class TestComponent extends React.Component{  
constructor(){  
super();  
this.onClick = this.onClick.bind(this);  
}  
  
async onClick(){  
const component = await import('../neededComponent.js');  
}  
  
render(){  
return <button onClick={this.onClick}>Lazy load me</button>  
}  
}
```

Read more on code splitting using dynamic imports [here](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-sass-stylesheet).

## 5. Proxy API Requests During Development

Usually during development we set up the server and React app on the same host and port, and then we’ll serve the frontend app on the "`/"` and maybe serve the API from the "`/api"` route. Well, with Create React app you don’t necessarily need that setup, as you can tell the Create React App server to proxy such requests to your API server.

So all you need to do to get this feature working is to add a `proxy` field in your `package.json` file.

```
“proxy”: ‘[http://localhost:4000](http://localhost:4000)’
```

This way any requests that can’t be processed by the development server will proxy to the value of the proxy field in the `package.json` file. So request to `/api/todos` will proxy to `http://localhost:4000/api/todos`.

This is very convenient as you don’t have to deal with CORS issues in development. Read more on proxying API requests [here](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#proxying-api-requests-in-development).

## 6. Support HTTPS During Development

During development, one might need the development server to serve pages over `HTTPS`. Maybe that OAuth application requires your app to be served over `HTTPS` before it authenticates or for some other reason. Whatever your reasons may be, Create React App has got you covered, as always.

It’s a very easy setup. All that’s required is setting the `HTTPS` environment variable to “true” before starting the server. Thus, instead of running:

```
npm start
```

On Windows cmd you run:

```
set HTTPS=true&&npm start
```

On Powershell run:

```
($env:HTTPS = $true) -and (npm start)
```

And finally on Linux and macOS run:

```
HTTPS=true npm start
```

Check out the full gist on HTTPS setup during development [here](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#using-https-in-development).

## 7. Support for Environment Variables

During development, you’ll have some sensitive information that shouldn’t be included in your scripts. Client keys, client secrets and the rest are best stored in environment variables, and Create React App comes to our rescue again by replacing environment variables referenced in your code base with their actual values.

All you need to do is create a `.env` file in the root of your project folder and define any variables your wish to use in your files in the following format:

```
//.env  
REACT_APP_CLIENT_SECRET=client-secret  
REACT_APP_CLIENT_KEY=client-key
```

The idea here is to prefix any environment variable you wish to define with `REACT_APP` and Create React App will replace it with its actual value when building your files.

Check out how you can create different environment variables for production and development [here](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-development-environment-variables-in-env).

## 8. Support for Latest JavaScript Standards

Create React App supports some of the latest and most used JavaScript standards. The ES6 syntax is fully supported by Create React App along with some other experimental proposals.

Experimental proposals like `async / await`, Object spread/rest properties are a few [others](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#supported-language-features) that are also supported out of the box.

To use other experimental features like Symbols, Promise and others requires a [polyfill](https://github.com/facebook/create-react-app/blob/master/packages/react-app-polyfill/README.md). The [polyfill](https://github.com/facebook/create-react-app/blob/master/packages/react-app-polyfill/README.md) is also provided by Create React App. They never stop helping, do they?

Read more on the currently supported standards [here](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#supported-language-features).

## 9. One Build Dependency

This is more of a fun fact than a point that’ll actually contribute to your development. Create React App makes use of webpack, Babel and the rest under the hood, but builds on top of them to provide a unified experience. That’s why we install one tool and we get a server, linting, transpilation and the rest alongside it.

## 10. Eject

If it comes to it and you think that there are some features you require in your project that are not supported by Create React App, you can always `eject`. Maybe you need static type-checking using TypeScript or the build setup doesn’t work well enough. You can always `eject`.

Now, ejecting simply means copying all of Create React Apps configurations to your project and handing over full control over to you. If you go this way, it’ll be hard but not impossible to go back.

Whenever you’re ready to go down this road, simply run `npm eject` and the deed will be done. But remember, with _ **great power comes great responsibility** _.

Read more on benefits and dangers of ejecting [here](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-eject).

These are just ten of the many things Create React App does to aid development experience. Going through their official [`README`](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md), you can find a lot more interesting features offered by Create React App. I hope that some of the things listed here actually help in making your development experience easier and more forthcoming.

* * *

**For more info on building apps with React:**  Check out our [All Things React](https://www.telerik.com/blogs/all-things-react) page that has a great collection of info and pointers to React information – with hot topics and up-to-date info ranging from getting started to creating a compelling UI.