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

Flareact4azion: 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 through Flareact4azion, 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.

Installing

From the source, cloning the git repository

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

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

Using it

Clone the template flareact4azion init ./site git@github.com:aziontech/flareact4azion-template.git to create the library.

Template content

| |- azion.json |- index.js |- package.json |- pages |- index.js

The template package contains three files: the azion.json, necessary to set the credentials, following the index.js, which includes assets it needs to run, and the package.json, which holds several data pertinent to the project. There is also the pages folder, containing an index.js file, useful to test the React components.

azion.json

{
  "kv": {
    "bucket": "azion-cells-dev",
    "region": "us-east-1",
    "path": "__static_content"
  },
  "azion": {
    "function_name": "FlareactTemplate",
  },
  "args": {
  }
}

index.js

import { handleEvent } from "flareact";

/**
 * The DEBUG flag will do two things that help during development:
 * 1. we will skip caching on the edge, which makes it easier to
 *    debug.
 * 2. we will return an error message on exception in your Response rather
 *    than the default 404.html page.
 */
const DEBUG = false;

addEventListener("fetch", (event) => {
  try {
    event.respondWith(
      handleEvent(event, require.context("./pages/", true, /\.(js|jsx|ts|tsx)$/), DEBUG)
    );
  } catch (e) {
    if (DEBUG) {
      return event.respondWith(
        new Response(e.message || e.toString(), {
          status: 500,
        })
      );
    }
    event.respondWith(new Response("Internal Error", { status: 500 }));
  }
});

package.json

{
  "name": "flareact-project",
  "version": "1.0.0",
  "license": "MIT",
  "description": "A template for kickstarting a Flareact project",
  "main": "index.js",
  "private": true,
  "scripts": {
    "build": "flareact4azion build",
    "deploy": "flareact4azion publish"
  },
  "dependencies": {
    "flareact": "^1.2.1",
    "react": "^17.0.0",
    "react-dom": "^17.0.0"
  }
}

Pages folder - index.js

export default function Index() {
  return (
    <h1>
      You're running React on the Edge!
    </h1>
  );
}

Building

Azion’s integration was created using AWS S3. Hence, you must have an account on Amazon Web Services to proceed. To compile the information, you will need a bucket in AWS S3, its access key, and its secret access key.

You should start by opening the azion.json file, setting the credentials from this file inside the project, or defining the environment variables AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY. The first variable specifies an AWS access key associated with an IAM user or role. The second key is essentially the “password” for the access key.

The access credentials to the bucket will be stored in the code sent to Azion, and the Edge Function will use them to retrieve the necessary pages stored during the publish step. Similarly, you will need credentials to deploy your project at Azion, and you can either set those in the azion.json file or define the environment variables AZION_ID and AZION_SECRET. The Azion credentials are not stored in the built code.

Building steps

cd ./site
npm install
flareact4azion build
cat > ./azion.json << EOF 
{
 "kv": {
  "accessKeyId": "<AWS_ACCESS_KEY_ID>", 
  "secretAccessKey": "<AWS_SECRET_ACCESS_KEY>", 
  "bucket":      "my-bucket-name",
  "region": "my-region",
  "path": "__static_content"
},
 "azion": {
  "id": "<AZION_ID>",
  "secret": "<AZION_SECRET>", 
  "function_name": "my-function-name"
  } 
}
EOF

Publishing

After installing it, run the following command flareact4azion publish.

Using your created function on Edge Application

Your newly created function will now interact with an Edge Application. After building and publishing your code to Azion, you should log in to Azion’s Real-Time Manager and create an Edge Application that will use your recently published Edge Function. Subsequent builds followed by corresponding publish will automatically update your Edge Application.


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