> 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. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## 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, and the optional `goal` query parameter: ``` GET https://docs.create-scandipwa-app.com/building-your-app/creating-production-build.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. 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.