Framework Compatibility| React

About React

React is a popular JavaScript library for building interactive user interfaces. It uses a component-based architecture where UI elements are encapsulated into reusable pieces, making development efficient and modular. React employs a virtual DOM, which optimizes updates and rendering for high performance.

Key features:

Declarative UI building using JSX
Component-based architecture for reusable UIs
Virtual DOM for efficient updates
Unidirectional data flow with props and state
Rich ecosystem of libraries and tools
Strong community and enterprise support
Full support for TypeScript

Available Templates

Template name	Use case	Details
ButterCMS + React Starter Project	Starter	Learn more
React Boilerplate	Starter project	Learn more

Templates with other frameworks that also use React:

Template name	Use case	Details
Space Jelly Shop	E-commerce	Learn more
Cosmic Agency	Starter	Learn more
Next.js Store with React	E-commerce	Learn more
Astro with React	Starter	Learn more
Astro With Multiple Frameworks	Starter	Learn more

Deploying a template using Azion Console

Login to Console.
Click the + Create button.
Click the Templates section.
Choose the desired React template.
Connect your GitHub Account.
Choose a name for your application.
Click Deploy.

Deploying an existing project using Import from GitHub

In Console Click the + Create button.
Select Import from Github.
Select your repository.
Choose an application name.
Select the React Preset.
Input the install command:

npm install

Click Deploy.

Deploying a template using Azion CLI

You can use the Azion CLI to deploy a template.

Initialize the project:

  azion init

Give your project a name, or press enter to accept the given suggestion:

? Your application's name:  (black-thor)

Choose the React preset:

? Choose a preset:  [Use arrows to move, type to filter]
  Angular
  Astro
  Docusaurus
  Eleventy
  Emscripten
  React
  Hexo
  Hono
  Hugo
  Javascript
  Preact
> React
  ...

Choose one of the available templates.
With the template fetched and configured, you can choose to start a local development server.

Do you want to start a local development server? (y/N)

The following steps are based on the answer you gave.

Answering `yes` to local dev

Install the project dependencies. Input y when the interaction prompts:

  Do you want to install project dependencies? This may be required to start local development server (y/N)

Wait until the installation is complete.

Output:

Your Edge Application was built successfully
[Azion] [Server] › ✔  success   Function running on port 0.0.0.0:3000, url: http://localhost:3000

On the browser, go to http://localhost:3000/ and you can see your React project running.

Deploying the project

When your project is running locally, you’re still able to deploy it to the edge. To do so:

Stop the terminal execution with control + c.
Access the project folder:

cd [your-project-name]

Deploy the project:

azion deploy

Wait while the project is built and deployed to the Azion Web Platform.

After the deployment is complete, you’ll receive a domain to access your React project on the Azion’s platform.

Wait a few minutes so the propagation takes place, and then access your application using the provided domain, which should be similar to https://xxxxxxx.map.azionedge.net.

Answering `no` to local dev

After indicating you don’t want to have a local server running, deploy the React project to the edge.

Enter y to the following interaction, indicating you want to deploy the project:

   Do you want to deploy your project? (y/N)

Install the project dependencies. Input y when the interaction prompts:

  Do you want to install project dependencies? This may be required to deploy your project (y/N)

Wait while the project is built and deployed to the Azion Web Platform.

After the deployment is complete, you’ll receive a domain to access your React project on the Azion Platform.