Build with React

Deploy a React app to an Azion domain from an Azion template, from your GitHub repository, or with the Azion CLI.

Last updated

View as Markdown Agent setup

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. 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 serves it. For the other frameworks that Azion builds, refer to Frameworks compatibility.

Pick the route you will follow. The prerequisites and the deploy procedure below change with your pick.

Prerequisites

  • Access to Azion Console. To sign in, refer to How to access Azion Console.
  • A GitHub account. The template form connects it when it asks for one.
  • Access to Azion Console. To sign in, refer to How to access Azion Console.
  • A GitHub account.
  • A GitHub repository that contains a React project.
  • The Azion CLI, installed and logged in. To set it up, refer to Azion 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:

TemplateUse
React BoilerplateStarter project
React with ButterCMS Starter ProjectStarter

React Boilerplate has its own guide, linked in the table. For more information on the other template, refer to Azion 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:

To create the project, run azion init with a project name. Select React in the preset picker and a template in the template picker:

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. With the React Boilerplate template, the command prints:

Text
01? Choose a preset: [Use arrows to move, type to filter]
02> AI Studio
03 Angular
04 Astro
05 Docusaurus
06 Eleventy
07 Emscripten
08 Gatsby
09 Hexo
10 Hono
11 Hugo
12 Javascript
13 Jekyll
14 Next
15 Nuxt
16 OpenNextJS
17 Preact
18 Qwik
19 React
20 Rustwasm
21 Stencil
22 Svelte
23 Typescript
24 Vitepress
25 Vue
26 Vuepress
27? Choose a preset: React
28? Choose a template: [Use arrows to move, type to filter]
29> React with ButterCMS Starter Project
30 React Boilerplate
31 Vite + React Boilerplate
32? Choose a template: React Boilerplate
33
34Fetching selected template...
35
36Template successfully fetched
37Template successfully configured
38Installing application dependencies
39…
40added 1307 packages, and audited 1308 packages in 1m
41273 packages are looking for funding
42 run `npm fund` for details
4370 vulnerabilities (3 low, 4 moderate, 63 high)
44
45To address issues that do not require attention, run:
46 npm audit fix
47
48To address all issues (including breaking changes), run:
49 npm audit fix --force
50
51Run `npm audit` for details.
52…
53[Azion] [Build] › ℹ info Using preset: react
54[Azion] [Build] › ✔ success Build completed successfully with only azion.config
55[Azion] [IaC] › ✔ success Manifest generated successfully at <project-dir>/my-site/.edge/manifest.json
56If you want to start a local development server later, run 'azion dev'
57Make sure to change to the new working directory before running building or deploying your project
58If you want to deploy your application later, run 'azion deploy'
59Make sure to change to the new working directory before running building or deploying your project
60Your 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.

To build the app, change to the project folder and run azion build:

Shell
01cd my-site
02azion build

Azion Bundler runs the template’s react-scripts build script with the react preset, and the compiled app lands in .edge/assets:

Text
01Building your Application. This process may take a few minutes
02Running build step command:
03
04$ npx --yes @aziontech/bundler@1.1.4 build --preset react
05…
06[Azion] [Build] › ℹ info Using preset: react
07[Azion] [Pre-Build] › ℹ info Starting pre-build...
08…
09[React] › ℹ info
10> reactjs-boilerplate@0.1.1 build
11> CI=false react-scripts build
12
13[React] › ℹ info (node:33966) [DEP0176] DeprecationWarning: fs.F_OK is deprecated, use fs.constants.F_OK instead
14…
15
16[React] › ℹ info Creating an optimized production build...
17
18[React] › ℹ info Compiled successfully.
19
20[React] › ℹ info File sizes after gzip:
21
22[React] › ℹ info 70.01 kB assets/static/js/main.1e230516.js
23 1.77 kB assets/static/js/453.6fadd187.chunk.js
24 513 B assets/static/css/main.f855e6bc.css
25
26[React] › ℹ info
27The project was built assuming it is hosted at /.
28You can control this with the homepage field in your package.json.
29
30The .edge/assets folder is ready to be deployed.
31…
32
33[Azion] [Pre-Build] › ℹ info Pre-build completed successfully
34[Azion] [Build] › ℹ info Using built-in handler from "react" preset.
35[Azion] [Build] › ℹ info Starting build...
36[Azion] [Build] › ✔ success Build completed successfully
37[Azion] [Post-Build] › ℹ info Starting post-build...
38[Azion] [Post-Build] › ✔ success Post-build completed successfully
39[Azion] [Storage] › ℹ info Using provided prefix for storage '$BUCKET_NAME': $BUCKET_PREFIX
40[Azion] [IaC] › ✔ success Manifest generated successfully at <project-dir>/my-site/.edge/manifest.json
41Your Application was built successfully

To deploy the app, run azion deploy in the project folder:

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.

To run the app on your machine before you deploy it, refer to Azion CLI dev. 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.

To deploy a React template from Azion Console:

Open the templates

Access Azion Console > Create > Templates.

Find the React templates

In Search by name, framework, or keyword, enter React.

Select the template to deploy
Connect your GitHub account

If the form shows GitHub Connection, select Connect with GitHub and install the Azion GitHub App.

Select a Git Scope

In Git Scope, select the scope for the template.

Fill in the settings the template asks for
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.

To deploy a React project from your GitHub repository:

Open Import from GitHub

Access Azion Console > Create > Import from GitHub.

Select the import card

In the Import from GitHub tab, select the card. The Import from GitHub page opens.

Connect your GitHub account

If no GitHub account is connected, select Connect with GitHub in GitHub Connection.

Select the repository

Select a Git Scope, and then select the Repository that contains the React project.

Name the application

In General, enter an Application Name. The repository name fills the field, and the storage bucket and the function get the name you keep.

Select the React preset

Set Preset to React.

Set the root directory

In Root Directory, keep / when the React project is at the root of the repository.

Enter the install command

In Install Command, enter npm install.

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.

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 compatibilitySee which other frameworks and presets Azion builds.Azion CLI deployRead the deploy output and the flags that change a deploy.Import a project from GitHubSet every field of the GitHub import, variables included.azion.config.jsChange the bucket, cache, and rules that the React preset generates.