Getting started with Netlify and Aiven

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:

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 Caching. 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 Caching 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
Copy to clipboard

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")
}
Copy to clipboard

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:

• Explore Aiven services
• Aiven monitoring and logs
• Aiven Terraform Provider