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

doc

Creating a Jamstack application on Azion Cells with Flareact framework

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.

Visit the official site of the Jamstack architecture for more information.

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. Moreover, Cells has a cold start time equal to zero, which makes it ideal to use with AI features, such as facial and object recognition.

Azion now supports Jamstack architecture with a command-line tool that builds Flareact projects targeting Azion’s Edge Functions.

Visit the official website of the Flareact framework for more information.

The Flareact framework enables you to render your applications using the React®1 library on the edge and not on the server. It also supports file-based page routing, dynamic page paths, and edge-side data fetching APIs.

Visit the React library website for more information.

See how to install, use, and publish a web application on Azion using the Flareact framework next.

  1. Prerequisites
  2. Installing Node.js
  3. Configuring a Flareact application on Azion
  4. Publishing a Flareact application on Azion

1. Prerequisites

To create an application with the Jamstack architecture on Azion Cells using the Flareact framework, you need:

  • An Amazon S32 bucket on Amazon Web Services2 (AWS) with write and read permissions.
  • An account on Azion platform with Edge Functions enabled.
  • The Node.js3 runtime environment, version 16.x or higher, installed in a build environment.
  • Azion CLI installed.

To install the Azion CLI, visit its reference documentation page.

2. Installing Node.js

You can download Node.js from its official website or with the Node Version Manager (NVM) tool. After downloading the file, install the Node.js runtime environment on your computer by following the instructions on the website.

Visit the NVM open-source project in the NVM repository for more information.

Note: be sure to use version 16.x or higher of Node.js. You also need permission to install global packages with Node.js’s npm package manager in your operating system.

3. Configuring a Flareact application on Azion

To configure and publish a web application with the Flareact framework on the Azion platform, follow these steps:

  1. Start a template-based application or clone your own project:

    git clone https://github.com/flareact/flareact-template

  2. Create a Personal Token in the Real-Time Manager (RTM).

    Note: you can use a Personal Token that already exists on the Azion platform. If you need to create a new one, go to Account Menu > Personal Tokens or go to reference documentation for more information.

  3. Run the following command to configure the Personal Token:

    azioncli configure --token azionxxxxxxxxxxx

    This command configures your personal token for use with CLI commands. A token is a random string of characters with the form azionxxxxxxxxxxx.

    Note: All commands from step 4 on must be executed within the project directory.

  4. Run the following command:

    azioncli webapp init --name "flareact-azion" --type flareact

    This command will install all the libraries and resources needed to run the Flareact framework on the Azion platform. It will also create a directory called azion in your web application folder.

    To verify the creation of the azion folder, run the ls command, which will present the following result:

     azion      package.json      ...
    

    The CLI response to the webapp init command is long. The end of the response should contain the information below, which confirms that the command was successful:

     ...
     ...
     ...
     added 1 package, and audited 3 packages in 832ms
    
     found 0 vulnerabilities
     /Users/<user_name>/repository/my-flareact-app
     Installed azion-framework-adapter successfully
    
     Command exited with code 0
    

    The <user_name> directory on the CLI response is the user´s home directory in the computer´s operating system.

  5. Create a project using the Flareact framework inside the project folder created in step 1.

  6. Run the following command to edit the azion/webdev.env file directly from the terminal:

    nano ./azion/webdev.env

    Visit the nano text editor website for more information and access to its documentation.

    The nano text editor will open in your terminal with two lines relative to your Amazon S3 bucket keys:

     AWS_ACCESS_KEY_ID=
     AWS_SECRET_ACCESS_KEY=
    

    Note: don’t worry if you’ve never used the nano text editor. You will only need simple commands to make the necessary changes, save them, and return to the terminal.

  7. Using the arrow keys on your keyboard, type in the “AWS_ACCESS_KEY_ID=” and “AWS_SECRET_ACCESS_KEY=” lines the respective keys of your Amazon S3 bucket from your AWS account.

  8. After entering the keys, press CTRL + o and then ENTER or RETURN to save.

  9. Press the CTRL + x keys to exit the text editor and return to the terminal.

    Warning: make sure you don’t version your credentials directly into your files for security reasons. You can use your software versioner’s VCS SECRETS feature for this purpose.

  10. Open the kv.json file for editing with the following command:

    nano ./azion/kv.json

    The command response will be a JSON file with content similar to the one shown below:

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

    Visit the JSON format website for more information.

  11. Edit the file by changing the bucket, region, and path keys according to your Amazon S3 bucket settings.

  12. Save the file by pressing CTRL + o and ENTER or RETURN.

  13. Return to the terminal by pressing the CTRL + x keys.

  14. Make sure you have installed all project’s local dependencies with the npm install or yarn install commands.

  15. Run the following command:

    azioncli webapp build

    The CLI builds your application.

4. Publishing a Flareact application on Azion’s platform

After building your web application using the Flareact framework, the next step is to publish it on RTM.

To publish your web application, follow these steps:

  1. Run the following command:

    azioncli webapp publish

    CLI response:

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

    Note: Publishing a web application via RTM or CLI is not an instantaneous process. There is a time to propagate and configure the application in Azion’s edge locations. It may be necessary to wait a few minutes for the URL to be activated and for the application to be effectively displayed in the browser.

  2. Access your web application through the URL <edge_application_id>.map.azionedge.net

Done! Your web application using the Flareact framework is now available on Azion’s platform!

To verify the address of the newly created domain, access the menu Products Menu > Domains on the Azion website. Other settings created by the publication can also be viewed in Real-Time Manager.


Trademarks

  1. React is a registered trademark of Meta Platforms, Inc. in the USA.
  2. Amazon Web Services, AWS, and Amazon Simple Storage Service (Amazon S3) are trademarks of Amazon.com, Inc. or its affiliates.
  3. Node.js is a registered trademark of the OpenJS Foundation® in the USA and/or other countries.

All rights reserved.


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