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

Prerequisites

Console

An Azion account. To create one, refer to Create an account.
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.

CLI

An Azion account. To create one, refer to Create an account.
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.

GitHub

An Azion account. To create one, refer to Create an account.
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.

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

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.

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:

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

34Fetching selected template...

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)

45To address issues that do not require attention, run:

46 npm audit fix

48To address all issues (including breaking changes), run:

49 npm audit fix --force

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:

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

[React] › ℹ  info      (node:33966) [DEP0176] DeprecationWarning: fs.F_OK is deprecated, use fs.constants.F_OK instead

14…

16[React] › ℹ info Creating an optimized production build...

18[React] › ℹ info Compiled successfully.

20[React] › ℹ info File sizes after gzip:

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

26[React] › ℹ info

27The project was built assuming it is hosted at /.

28You can control this with the homepage field in your package.json.

30The .edge/assets folder is ready to be deployed.

31…

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.

GitHub

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.

These checks confirm the Deploy frontend applications use case.

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.Deploy frontend applicationsA single-page application whose API calls reach an existing backend under the same domain.