Frameworks Compatibility | Gatsby

Explore how Azion Bundler integrates with Gatsby, a static site generator that compiles your React components into static HTML.

View as Markdown

About Gatsby

Gatsby is a static site generator that compiles your React components into static HTML. It uses a component-based architecture where you write React components, and Gatsby pre-renders them to static HTML at build time. This approach results in fast page loads since the HTML is ready to serve immediately.

Key features:

  • Static HTML generation at build time
  • React-based component architecture
  • GraphQL data layer for content management
  • Built-in support for Markdown and MDX
  • TypeScript support
  • File-based routing system
  • Rich plugin ecosystem for extending functionality

You can deploy your Gatsby project either by using our ready to deploy templates or by linking an existing project with the Azion CLI.

Available Templates

Template nameUse caseDetails
ButterCMS + Gatsby Starter ProjectE-commerce Learn more
Gatsby Blog Starter KitStarter project Learn more
Gatsby Ecommerce ThemeBlog creation Learn more
Gatsby BoilerplateE-commerce platform Learn more

Deploying a template using Azion Console

  1. Login to Console.
  2. Click the + Create button.
  3. Click the Templates section.
  4. Choose the desired Gatsby template.
  5. Connect your GitHub Account.
  6. Choose a name for your application.
  7. Click Deploy.

Deploying an existing project using import from GitHub

  1. In Console Click the + Create button.
  2. Select Import from Github.
  3. Select your repository.
  4. Choose an application name.
  5. Select thr Gatsby Preset.
  6. Input the install command:
npm install
  1. Click Deploy

Deploying a template using Azion CLI

You can use the Azion CLI to deploy a template.

Visit our CLI guide for detailed installation instructions.

  1. Initialize the project:
azion init
  1. Give your project a name, or press enter to accept the given suggestion:
? Your applications name: (black-thor)
  1. Choose the Gatsby preset:
? Choose a preset: [Use arrows to move, type to filter]
Angular
Astro
Docusaurus
Eleventy
Emscripten
> Gatsby
Hexo
Hono
Hugo
Javascript
...

  1. Choose one of the available templates.

  2. With the template fetched and configured, you can choose to start a local development server.

Do you want to start a local development server? (y/N)

The following steps are based on the answer you gave.

Answering yes to local dev

  1. Install the project dependencies. Input y when the interaction prompts:
Do you want to install project dependencies? This may be required to start local development server (y/N)

Wait until the installation is complete.

Output:

Your Application was built successfully
[Azion] [Server] › ✔ success Function running on port 0.0.0.0:3333, url: http://localhost:3333
  1. On the browser, go to http://localhost:3333/ and you can see your Gatsby project running.

Deploying the project

When your project is running locally, you’re still able to deploy it to the edge. To do so:

  1. Stop the terminal execution with control + c.

  2. Access the project folder:

cd [your-project-name]
  1. Deploy the project:
azion deploy
  1. Wait while the project is built and deployed to the Azion Web Platform.

Once the deployment is triggered, Azion will open the browser and take the user to a page on Azion Console where the deployment logs and process can be monitored. If it doesn’t open automatically, just click on the provided link.

After the deployment is complete, you’ll receive a domain to access your Gatsby project on the Azion’s platform.

Wait a few minutes so the propagation takes place, and then access your application using the provided domain, which should be similar to https://xxxxxxx.map.azionedge.net.

Answering no to local dev

After indicating you don’t want to have a local server running, deploy the Gatsby project to the edge.

  1. Enter y to the following interaction, indicating you want to deploy the project:
Do you want to deploy your project? (y/N)
  1. Install the project dependencies. Input y when the interaction prompts:
Do you want to install project dependencies? This may be required to deploy your project (y/N)
  1. Wait while the project is built and deployed to the Azion Web Platform.

Once the deployment is triggered, Azion will open the browser and take the user to a page on Azion Console where the deployment logs and process can be monitored. If it doesn’t open automatically, just click on the provided link.

After the deployment is complete, you’ll receive a domain to access your Gatsby project on the Azion Platform.

Wait a few minutes so the propagation takes place, and then access your application using the provided domain, which should be similar to https://xxxxxxx.map.azionedge.net.

Local project deploy with Azion CLI

You can use the Azion CLI to deploy a project compatible with our availiable frameworks.

Visit our CLI guide for detailed installation instructions.

  1. Inside your existing project folder, use the command below to link your project to an application:
azion link

  1. Choose the Gatsby preset.

  2. The CLI will guide you through the rest of the process. In less than five minutes, your application can be up and running on the Azion Web Platform.