Import & Deploy a Project from GitHub

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

Requirements

Before starting, you must have:

• An Azion account.
  • Check the How to create an account on Azion guide for more information.
• A GitHub account to import your repositories.
  • Every push will be deployed automatically to those repositories to keep your projects updated.

Supported frameworks

Azion Web 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 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.

3. Select the Import from GitHub option and click the card.

• This action will open the settings page.

4. 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.

5. Select the GitHub Scope to work with.
6. In the General section, complete the following fields. Fields with an asterisk are mandatory.

• 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 function will use the same name.
• Preset *: define the initial settings for the application.
• 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 the logs. When it’s complete, a notification appears, confirming the 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 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 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 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 application through it.