1 of 20
2 of 20
3 of 20
4 of 20
5 of 20
6 of 20
7 of 20
8 of 20
9 of 20
10 of 20
11 of 20
12 of 20
13 of 20
14 of 20
15 of 20
16 of 20
17 of 20
18 of 20
19 of 20
20 of 20

site

doc

blog

success stories

Creating a JAMStack application on Azion Cells with Flareact framework

Edit on GitHub

JAMStack is a set of best practices and workflows to maximize website-building efficiency. Millions of developers and businesses use JAMStack through various platforms to run global projects.

Cells is Azion’s framework and runtime for serverless applications. When using it, customers can run their code on our Edge network worldwide – built for edge-native and ultra-low latency applications and analyzing data in real-time. Some of its features include low impact and low memory consumption, especially when compared to Containers and other services; and a cold start time of zero, which makes it ideal to use in AI, such as facial and object recognition.

Azion now supports JAMStack using the Flareact framework, a command-line tool that builds Flareact projects targeting Azion’s Edge Functions. It allows you to render your React apps at the edge rather than on the server. It also supports file-based page routing, dynamic page paths, and edge-side data fetching APIs.

  1. Installing
  2. Using
  3. Publishing

1. Installing

Node.js

Make sure to download nvm and install version 14.18 of Node.js.

install nvm
nvm install v14.18 
nvm use v14.18

Azion CLI

To proceed with this use case, you will need to run the Azion CLI. You can find out how to do it on the documentation page.

2 . Using

You should run the next commands inside an existing Flareact project. After the installing setup is complete, proceed as follows:

  • Run azioncli init --name "flareact-azion" --type flareact

This command will install all the libraries and resources necessary to run the Flareact Framework on Azion and create a folder/directory called azion.

Access the azion directory. Then, you need to edit the following files:

  • In webdev.env, you must insert the AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY from your S3 Storage.

    Important: Make sure not to version your credentials directly in your files. You can use your VCS SECRETS feature for this.

  • In kv.json, you will need to insert your S3 Configuration from AWS.

    {
      "kv": {
        "bucket": "azion-flareact",
        "region": "us-east-1",
        "path": "__static_content"
    }
    

After setting up your KV Storage, run the following command:

  • Run azioncli build

Then, Azion CLI will build the application.

3. Publishing

The next step is to publish your application on the Real-Time Manager.

  • Run azioncli publish

Publishing your application on Real-Time Manager through Azion CLI will create an Edge Application executing an Edge Function with your code. It will also generate a Domain to access your application.

In your terminal, the following message will appear to you:

  • Your Domain name: <edge_application_id>.map.azionedge.net

You can copy and paste in your browser to access your Flareact Application.


Didn’t find what you were looking for? Open a support ticket.