Aiven Blog

Sep 12, 2023

Getting started with Netlify and Aiven

Deploy a JAMstack web application on Netlify with data services provided by Aiven!

dewan-ahmed

Dewan Ahmed

|RSS Feed

Senior Developer Advocate

Meet Alex, a talented front-end developer, skillful at building efficient and elegant applications using JavaScript, API and Markup (JAM) stack. Even though she's really good at front-end development, there's still one area that she finds puzzling: making the application communicate to a production-grade database and move the code from her local machine to the real-world, live environment.

Then, she heard about Netlify and Aiven. Netlify is a platform known for its ability to host and deploy JAMstack applications with ease and Aiven is a trusted open-source data platform that lets Alex create reliable and enterprise-ready data services like MySQL and Redis®*.

In this tutorial, we accompany Alex on her journey from being a developer with little knowledge about production-grade databases and deployment, all the way to mastering the process of deploying a robust, secure, and scalable Next.js applications on Netlify, integrated seamlessly with MySQL and Redis.

But... how does this work?

A picture is worth a thousand words. Let's looks at the following architecture diagram:

Architectural diagram for a Netlify and Aiven deployment. The left hand side shows the services in a developer's local environment, with MySQl and Redis running in local containers for testing. The developer then pushes those changes to GitHub, and on the right hand side there are two boxes describing what happens in Netlify and what happens in Aiven. The app is deployed to Netlify, which handles security, scalability and robustness for the front-end. The Redis and MySQL databases are deployed using Aiven and the app communicates with Aiven over a secure connection.

This architecture diagram splits the application's lifecycle into two distinct sections: the development environment and the production environment.

On the left-hand side, we have the development environment where our protagonist, Alex, spends most of her time. Here, three critical elements exist:

  1. A web browser pointing to localhost:8080, which allows Alex to interact with and observe the behavior of her application in real-time.

  2. A set of local source code files, where Alex crafts the application, line by line.

  3. A Docker image for running the databases locally, enabling Alex to simulate a more realistic, production-like environment during the development process.

Once Alex is satisfied with her work, an arrow shows how she pushes her code from her local development environment to a centrally located GitHub repository.

In the middle of the diagram, the GitHub icon acts as the bridge between the development and production environments. Upon each push to the repository, a webhook triggers an action that leads us into the right-hand side of the diagram: the production environment.

In the production environment, we see the application in its mature, fully realized state. It's here that the application, now deployed on Netlify, is secure, scalable, and reliable. It's ready to perform under the pressure of potentially millions of users, a testament to its robust architecture.

The production application communicates with Aiven for MySQL and Aiven for Redis®*. They are the robust and reliable backbones of our application, helping maintain performance, even as the user load scales up.

By following this architectural flow, we see the journey of the application, from Alex's local development setup to the sturdy production-ready system that serves millions of users.

You got me hooked. How do I start?

Great! We have written a detailed tutorial that you can follow. This tutorial uses a PostgreSQL® database instead of MySQL. Once you have completed the tutorial, it's fairly easy to swap PostgreSQL with MySQL, as these components are modular. Let's look at the sections where you'll make the changes.

Set up the services

This tutorial begins with some pre-requisite accounts setup and tool installations. When you've completed that part and have moved to Create free PostgreSQL and Redis services part, create a MySQL service instead of a PostgreSQL one for this tutorial. When you're done, you should have:

  • An Aiven for MySQL service running, and
  • An Aiven for Redis service running

Get the application code

This is the original GitHub repository for the tutorial that uses a PostgreSQL backend. I've forked the repository and made changes to the source code so that it works with a MySQL backend instead.

Fork and clone the repository with the GitHub CLI:

gh repo fork https://github.com/Aiven-Labs/nextjs-netlify-aiven-mysql.git \ --clone --remote

The key change in this repository are the provider and schema details in the ORM (Prisma) going from postgresql to mysql and the recipe model. The recipe model replaces String[] with String for directions since MySQL doesn't have built-in support for arrays. If you observe the prisma/schema.prisma file, it looks like this:

// This is your Prisma schema file, // learn more about it in the docs: https://pris.ly/d/prisma-schema generator client { provider = "prisma-client-js" } datasource db { provider = "mysql" url = env("DATABASE_URL") } model Recipe { id Int @id @default(autoincrement()) recipeName String @map("recipe_name") prepTimeMinutes Int @map("prep_time_minutes") cookTimeMinutes Int? @map("cook_time_minutes") totalTimeMinutes Int @map("total_time_minutes") servings Int yield String? ingredients Json directions String rating Float url String? imgSrc String? nutrition String? isLiked Boolean @default(false) @map("is_liked") @@map("recipes") }

Deploy the application

Follow the rest of the tutorial to deploy the application. Remember to use the MySQL database URL for the DATABASE_URL variable instead of PostgreSQL.

Next steps

Now that Alex deployed her Next.js application to Netlify with a robust data platform as the backend (yes, that's Aiven), she can venture off to learn about other data services she can use on the Aiven platform. Alex will also benefit from the built-in logging and monitoring of services that Aiven providers. To top it all off, she can leverage Aiven Terraform Provider to automate the creation of all data services. Check out the following links to learn more:


Related resources

  • What is MySQL? Get the basics here illustration

    Feb 23, 2022

    MySQL is a traditional open source relational database that goes well with many well-established applications. Find out more about its features and use cases.

  • Quickly developing REST APIs with PostgREST illustration

    Jan 20, 2022

    Setting up an HTTP interface to a database can be a lot of work. Find out how PostgREST makes it quick and simple to provide RESTful access to PostgreSQL®.

  • Introduction to OpenSearch® illustration

    Jan 27, 2022

    OpenSearch is a community-driven and truly open source search and analytics suite. Read on for a high-level look at its capabilities.