How to import an existing project from GitHub and deploy it

This documentation assists you in importing your own GitHub repository to build and deploy a new edge application on Azion’s edge.

Requirements

Before starting, you must have:

Supported frameworks

Azion Edge Platform offers support for different JamStack frameworks, including:

  • Next.js
  • Angular
  • Astro
  • Hexo
  • React
  • Vue

Check some code samples to fork and use as boilerplate, if desired. Read more about Frameworks compatibility in the documentation.

Importing a project and setting up the edge application

To start building, complete the following steps:

  1. Access Azion Console.
  2. On the homepage, click the + Create button.
  • It’ll open a modal with the options to create new applications and resources.
  1. Select the Import from GitHub option and click the card.
  • This action will open the settings page.
  1. Connect your Azion account with GitHub.
  • A pop-up window will open to confirm the installation of the Azion GitHub App, a tool that connects your GitHub account with Azion’s platform.
  • Define your permissions and repository access as desired.
  1. Select the GitHub Scope to work with.
  2. In the General section, complete the following fields. Fields with an asterisk are mandatory.
  • Edge Application Name *: use a unique and easy-to-remember name. If the name has already been used, the platform returns an error message.
    • The bucket for storage and the edge function will use the same name.
  • Preset *: define the initial settings for the application.
  • Mode *: define the operational mode of the application within the framework. Currently, there are two modes available Deliver for static content and Compute for edge processing (SSR or Back-End. Only supported for Next.js projects)
  • Root Directory *: it refers to the directory in which your code is located. Your code must not be located in a subdirectory, but be located at the root directory. A ./ symbol appears in this field, indicating it’s a root directory.
  • Install Command *: the command that compiles your settings to build for production. Build commands are executed through scripts. For example: npm run build or npm install for the npm package.
  1. In the Variables section, you can add project variables as needed.
  • Variables are composed of two key values, in the format KEY_VARIABLE=VALUE. For example:API_URL=www.apiurl.com/abc.
  • The Key filed accepts upper-case letters, numbers, and underscore.
  • You can use them as global variables and edit or turn them into secrets on the Variables page. Read the Variables documentation for more details.
  1. Click the Deploy button to start the deployment.

You can follow the deployment process through a window showing off the logs. When it’s complete, a notification appears, confirming the edge application has been successfully created.

The page will also display information about the application and some options to continue your journey, including the domain to access it and the management button.

Managing your edge application

All application settings can be customized any time you need through Azion Console. To do so, click the Manage button that appears during the deployment or go to the Edge Application page and select the application you want to update.

As your Azion account is connected to the GitHub repository, any changes will be replicated in both, keeping your project up-to-date in a continuous deployment workflow.

Adding a custom domain

The edge application created during the deployment has an assigned Azion domain to make it accessible through the browser. The domain has the following format: xxxxxxxxxx.map.azionedge.net/. However, you can add a custom domain for users to access your edge application through it.

Go to configuring a domain guide

Contributors