# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.create-scandipwa-app.com/building-your-app/creating-production-build.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.