Deploying Your First Amplify Project with Serverless

Miracle Ayodele — Sat, 16 Jan 2021 17:49:25 +0000

It is everyone joy to see what he or she has done no matter how little the project might be.

In a previous article, I showed you how to create your first amplify project and now we will be deploying the static project.

The traditional approach will be to get an EC2 instance and deploy your app on the instance, but there is an easy, cost effective and modern approach of deploying your app.

This modern way is by using the Serverless approach. In our case, we started our project with Next.js, so we are going to be using the Serverless Next.js

In the root directory of your project, you should add a YAML file, called serverless.yml, then add this line of code

# serverless.yml

myFirstApplication:
  component: "@sls-next/serverless-component@1.16.0"

Once this is done, you can run this command:

npx serverless

Wait for some minutes for the process to complete. Once the process is complete, a URL will be created for you to see your app. Here is mine

Note, if the generated URL shows This site can't be reached, you will have to be patient and keep reloading till it shows your app.

Congratulation, your first amplify app is now live.

Creating Your First Amplify Project with Next.js App

Miracle Ayodele — Sat, 16 Jan 2021 17:48:21 +0000

To create your first Amplify project with Next.js, you first need to create a Next.js App and this can easily be done by running:

npx create-next-app project-name

Wait for some minutes for the process to complete, then you can move to the project directory from your terminal and you will be ready to create your amplify project.

If you need little understanding of what Amplify is, you can check it out here.

The first step to creating your amplify project is by Initialization. Here is how you can do that:

amplify init

You will be asked some questions, to make it easy, kindly see image below;

Once you are done filling the questions, the initialization process will begin

Now you have created your project, you can search for amplify in your AWS search box, click on Amplify and you will see your project.

There are lot of things you can still add to your project. You can add authentication flow, lambda functions and many more.

DEV Community: Miracle Ayodele

Deploying Your First Amplify Project with Serverless

Creating Your First Amplify Project with Next.js App