# 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](/en/documentation/products/accounts/creating-account/) guide for more information. - A [GitHub account](https://github.com/signup) 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](https://github.com/aziontech/azion-samples/tree/dev/templates) to fork and use as boilerplate, if desired. Read more about [Frameworks compatibility](/en/documentation/products/devtools/azion-edge-runtime/frameworks-compatibility/) in the documentation. :::note In case of importing projects based on unsupported frameworks, the platform won't complete the building and deployment processes. ::: --- ## Importing a project and setting up the application To start building, complete the following steps: 1. Access [Azion Console](https://console.azion.com). 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](/en/documentation/products/guides/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](/en/documentation/products/build/develop-with-azion/environment-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. :::note The link to the application allows you to see it on the browser. However, it takes a certain 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 page to be effectively displayed in the browser. ::: --- ## 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. :::tip Read the documentation about [managing applications](/en/documentation/products/build/applications/first-steps/) for more details. ::: 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. import DocButton from '~/components/webkit/DocButton.vue';