> For the complete documentation index, see [llms.txt](https://docs.create-scandipwa-app.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.create-scandipwa-app.com/building-your-app/creating-production-build.md).

# Creating production build

To create a production build of your theme, you must run the build command:

```
npm run build
```

This creates a `build` directory with a production build of your app. Inside the `build/static` directory will be your JavaScript and CSS files. Each filename inside of `build/static` will contain a unique hash of the file contents. This hash in the file name enables [long term caching techniques](https://create-react-app.dev/docs/production-build#static-file-caching).

{% hint style="warning" %}

### **Heads Up!**

When [compiled as Magento 2 theme](/deploying-your-app/magento-theme.md), the production build directory is changed to `magento/Magento_Theme`. 
{% endhint %}

## JavaScript chunks

When running a production build of freshly created Create React App application, there are a number of `.js` files (called *chunks*) that are generated and placed in the `build/static/js` directory:

`main.[hash].chunk.js`

* This is your application code. `index.js`, etc.

`[name].[hash].chunk.js`

* These files are **code-splitting** chunks. The code inside them includes modules that you've imported using the [dynamic `import()`](http://2ality.com/2017/01/import-operator.html#loading-code-on-demand) or following [`React.lazy`](https://reactjs.org/docs/code-splitting.html#reactlazy) approach.

`[number].[hash].chunk.js`

* These files are **vendor** chunks. The code inside them includes modules that you've imported from within `node_modules`. Since vendor code tends to change less often than the actual application code, the browser will be able to cache them separately, and won't re-download them each time the app code changes.

`runtime-main.[hash].js`

* This is a small chunk of [webpack runtime](https://webpack.js.org/configuration/optimization/#optimization-runtimechunk) logic which is used to load and run your application. The contents of this will be embedded in your `build/index.html` file by default to save an additional network request.

## CSS chunks

Similarly with JavaScript in production, there are a number of `.css` files (called *chunks*) that are generated and placed in the `build/static/css` directory:

`[name].[hash].chunk.css`

* These files are **code-splitting** chunks. The code inside them includes CSS modules that you've imported in JavaScript modules imported using the [dynamic `import()`](http://2ality.com/2017/01/import-operator.html#loading-code-on-demand) or following [`React.lazy`](https://reactjs.org/docs/code-splitting.html#reactlazy) approach.

`[number].[hash].chunk.css`

* These files are **vendor** chunks. The code inside them includes CSS modules that you've imported from within `node_modules`. 

`main.[hash].chunk.css`

* This are styles imported in your application. `index.js`, etc.