--- name: azion-build-with-react description: >- Deploy a React app to an Azion domain from an Azion template, from your GitHub repository, or with the Azion CLI. --- # Build with React You can deploy a React app on Azion from a template in Azion Console, from a GitHub repository you own, or with the [Azion CLI](/en/documentation/devtools/cli/). All three routes leave the app running on Azion behind an Azion domain. Azion serves a React app as a static application. The build writes the compiled app to `./.edge/assets`, the deploy uploads that folder to a storage bucket, and an [application](/en/documentation/platform/applications/) serves it. For the other frameworks that Azion builds, refer to [Frameworks compatibility](/en/documentation/devtools/runtime/frameworks/frameworks-compatibility/). --- Pick the route you will follow. The prerequisites and the deploy procedure below change with your pick. ## Prerequisites - An Azion account. To create one, refer to [Create an account](/en/documentation/fundamentals/creating-account/). **Console** - Access to Azion Console. To sign in, refer to [How to access Azion Console](/en/documentation/guides/platform/account-and-billing/how-to-access-azion-console/). - A GitHub account. The template form connects it when it asks for one. **GitHub** - Access to Azion Console. To sign in, refer to [How to access Azion Console](/en/documentation/guides/platform/account-and-billing/how-to-access-azion-console/). - A GitHub account. - A GitHub repository that contains a React project. **CLI** - The Azion CLI, installed and logged in. To set it up, refer to [Azion CLI quickstart](/en/documentation/devtools/cli/quickstart/). - Node.js 18 or later, and npm. - A terminal and a code editor. --- ## React templates A React template is a starter project that Azion builds and deploys for you. The Console route deploys one of these templates: | Template | Use | | --------------------------------------------------------------------------------------------------- | --------------- | | [React Boilerplate](/en/documentation/guides/application-development/frameworks/react-boilerplate/) | Starter project | | React with ButterCMS Starter Project | Starter | React Boilerplate has its own guide, linked in the table. For more information on the other template, refer to [Azion Marketplace](/en/documentation/platform/marketplace/). In the CLI route, the template picker of `azion init` lists every template of the React preset. --- ## Deploy the app Every route builds the React project and creates the Azion resources that serve it. Follow the panel of your route: **Console** To deploy a React template from Azion Console: 1. **Open the templates** Access [Azion Console](https://console.azion.com/) > **Create** > **Templates**. 2. **Find the React templates** In **Search by name, framework, or keyword**, enter `React`. 3. **Select the template to deploy** 4. **Connect your GitHub account** If the form shows **GitHub Connection**, select **Connect with GitHub** and install the [Azion GitHub App](/en/documentation/guides/application-development/automation/azion-github-app/). 5. **Select a Git Scope** In **Git Scope**, select the scope for the template. 6. **Fill in the settings the template asks for** 7. **Select Deploy** The deploy page opens and its **Deploy Log** follows the build. When the deploy succeeds, the page shows **Successfully created!**, the domain URL, and a **Manage** button that opens the application. **GitHub** To deploy a React project from your GitHub repository: 1. **Open Import from GitHub** Access [Azion Console](https://console.azion.com/) > **Create** > **Import from GitHub**. 2. **Select the import card** In the **Import from GitHub** tab, select the card. The **Import from GitHub** page opens. 3. **Connect your GitHub account** If no GitHub account is connected, select **Connect with GitHub** in **GitHub Connection**. 4. **Select the repository** Select a **Git Scope**, and then select the **Repository** that contains the React project. 5. **Name the application** In **General**, enter an **Application Name**. The repository name fills the field, and the storage bucket and the [function](/en/documentation/platform/functions/) get the name you keep. 6. **Select the React preset** Set **Preset** to *React*. 7. **Set the root directory** In **Root Directory**, keep `/` when the React project is at the root of the repository. 8. **Enter the install command** In **Install Command**, enter `npm install`. 9. **Select Deploy** The deploy page opens with the title `Deploy:` and the application name, and its **Deploy Log** follows the build. When the deploy succeeds, the page shows **Successfully created!** and the domain URL. To set **Variables** or another field of the import form, refer to [Import a project from GitHub](/en/documentation/guides/application-development/automation/import-an-existing-project-from-github/). **CLI** To create the project, run `azion init` with a project name. Select *React* in the preset picker and a template in the template picker: ```bash azion init --name my-site --auto -y ``` The `-y` option installs the dependencies. The `--auto` option skips the questions about a local development server and a deploy. For the questions the command asks without these options, refer to [Azion CLI init](/en/documentation/devtools/cli/init/). With the *React Boilerplate* template, the command prints: ```text ? Choose a preset: [Use arrows to move, type to filter] > AI Studio Angular Astro Docusaurus Eleventy Emscripten Gatsby Hexo Hono Hugo Javascript Jekyll Next Nuxt OpenNextJS Preact Qwik React Rustwasm Stencil Svelte Typescript Vitepress Vue Vuepress ? Choose a preset: React ? Choose a template: [Use arrows to move, type to filter] > React with ButterCMS Starter Project React Boilerplate Vite + React Boilerplate ? Choose a template: React Boilerplate Fetching selected template... Template successfully fetched Template successfully configured Installing application dependencies … added 1307 packages, and audited 1308 packages in 1m 273 packages are looking for funding run `npm fund` for details 70 vulnerabilities (3 low, 4 moderate, 63 high) To address issues that do not require attention, run: npm audit fix To address all issues (including breaking changes), run: npm audit fix --force Run `npm audit` for details. … [Azion] [Build] › ℹ info Using preset: react [Azion] [Build] › ✔ success Build completed successfully with only azion.config [Azion] [IaC] › ✔ success Manifest generated successfully at /my-site/.edge/manifest.json If you want to start a local development server later, run 'azion dev' Make sure to change to the new working directory before running building or deploying your project If you want to deploy your application later, run 'azion deploy' Make sure to change to the new working directory before running building or deploying your project Your application my-site was initialized successfully ``` The command creates the project in a `my-site` folder. Its `azion.config.cjs` sets the `react` preset and uploads `./.edge/assets` to a storage bucket that workloads can only read. The same file adds a rule named `Redirect to index.html`, which rewrites routes to `/index.html` so that React handles routing in the browser. For every setting in that file, refer to [azion.config.js](/en/documentation/devtools/cli/azion-config-js/). To build the app, change to the project folder and run `azion build`: ```bash cd my-site azion build ``` Azion Bundler runs the template's `react-scripts build` script with the `react` preset, and the compiled app lands in `.edge/assets`: ```text Building your Application. This process may take a few minutes Running build step command: $ npx --yes @aziontech/bundler@1.1.4 build --preset react … [Azion] [Build] › ℹ info Using preset: react [Azion] [Pre-Build] › ℹ info Starting pre-build... … [React] › ℹ info > reactjs-boilerplate@0.1.1 build > CI=false react-scripts build [React] › ℹ info (node:33966) [DEP0176] DeprecationWarning: fs.F_OK is deprecated, use fs.constants.F_OK instead … [React] › ℹ info Creating an optimized production build... [React] › ℹ info Compiled successfully. [React] › ℹ info File sizes after gzip: [React] › ℹ info 70.01 kB assets/static/js/main.1e230516.js 1.77 kB assets/static/js/453.6fadd187.chunk.js 513 B assets/static/css/main.f855e6bc.css [React] › ℹ info The project was built assuming it is hosted at /. You can control this with the homepage field in your package.json. The .edge/assets folder is ready to be deployed. … [Azion] [Pre-Build] › ℹ info Pre-build completed successfully [Azion] [Build] › ℹ info Using built-in handler from "react" preset. [Azion] [Build] › ℹ info Starting build... [Azion] [Build] › ✔ success Build completed successfully [Azion] [Post-Build] › ℹ info Starting post-build... [Azion] [Post-Build] › ✔ success Post-build completed successfully [Azion] [Storage] › ℹ info Using provided prefix for storage '$BUCKET_NAME': $BUCKET_PREFIX [Azion] [IaC] › ✔ success Manifest generated successfully at /my-site/.edge/manifest.json Your Application was built successfully ``` To deploy the app, run `azion deploy` in the project folder: ```bash azion deploy ``` The command uploads the project and opens the Console page that follows the deploy. It also prints the URL of that page in case no browser opens. When the deploy ends, it prints the URL of the app's domain. For the full output and every flag, refer to [Azion CLI deploy](/en/documentation/devtools/cli/deploy/). To run the app on your machine before you deploy it, refer to [Azion CLI dev](/en/documentation/devtools/cli/dev-command/). To deploy a React project you already have, run `azion link` in its folder and select the React preset. For more information, refer to [Azion CLI link](/en/documentation/devtools/cli/link-command/). --- ## Check the site Every route returns the URL of the app's Azion domain, in the form `https://xxxxxxxxxx.map.azionedge.net`. Azion Console shows it on the deploy page, and `azion deploy` prints it when it ends. Open the URL in a browser to see the React app. The first deploy can take several minutes to answer from every location; later deploys take about two minutes. Until a location receives the app, the domain answers with a `404` page that reads `There's nothing here yet`. On that response, wait and request the URL again. --- ## Next steps - [Frameworks compatibility](/en/documentation/devtools/runtime/frameworks/frameworks-compatibility.md): See which other frameworks and presets Azion builds. - [Azion CLI deploy](/en/documentation/devtools/cli/deploy.md): Read the deploy output and the flags that change a deploy. - [Import a project from GitHub](/en/documentation/guides/application-development/automation/import-an-existing-project-from-github.md): Set every field of the GitHub import, variables included. - [azion.config.js](/en/documentation/devtools/cli/azion-config-js.md): Change the bucket, cache, and rules that the React preset generates.