Ionic React

This guide shows you how to deploy a Ionic React application to Edgio.

Example#

System Requirements#

• Install Node.js 14.19.0

Sign up for Edgio#

Deploying requires an account on Edgio. Sign up here for free.

Install the Edgio CLI#

If you have not already done so, install the Edgio CLI.

With npm:

1npm i -g @layer0/cli

With yarn:

1yarn global add @layer0/cli

Create a new Ionic React app#

If you don’t already have a Ionic React app, create one by running the following:

1npm install -g @ionic/cli
2ionic start myApp tabs --type react
3cd myApp

You can verify your app works by running it locally with:

1npm run start

Configuring your Ionic React app for Edgio#

Initialize your project#

In the root directory of your project run 0 init:

10 init

This will automatically update your package.json and add all of the required Edgio dependencies and files to your project. These include:

• The @layer0/core package - Allows you to declare routes and deploy your application on Edgio
• The @layer0/prefetch package - Allows you to configure a service worker to prefetch and cache pages to improve browsing speed
• layer0.config.js - A configuration file for Edgio
• routes.js - A default routes file that sends all requests to Ionic React.

Configure the routes#

Update routes.js at the root of your project to the following:

1// This file was added by layer0 init.
2// You should commit this file to source control.
3
4import { Router } from '@layer0/core/router'
5
6export default new Router()
7  // Prevent search engine bot(s) from indexing
8  // Read more on: https://docs.layer0.co/guides/cookbook#blocking-search-engine-crawlers
9  .noIndexPermalink()
10  .static('build', ({ cache }) => {
11    cache({
12      edge: {
13        maxAgeSeconds: 60 * 60 * 60 * 365,
14        forcePrivateCaching: true,
15      },
16      browser: {
17        maxAgeSeconds: 0,
18        serviceWorkerSeconds: 60 * 60 * 24,
19      },
20    })
21  })
22  .fallback(({ appShell }) => {
23    appShell('build/index.html')
24  })

Refer to the Routing guide for the full syntax of the routes.js file and how to configure it for your use case.

Run the Ionic React app locally on Edgio#

Create a production build of your app by running the following in your project’s root directory:

1npm run build

Test your app with the App Platform on your local machine by running the following command in your project’s root directory:

10 dev

Load the site http://127.0.0.1:3000

Deploying#

Create a production build of your app by running the following in your project’s root directory:

1npm run build

Deploy your app to the App Platform by running the following command in your project’s root directory:

10 deploy

Refer to the Deploying guide for more information on the deploy command and its options.