Create your first Amplify app

In this episode, we create your first Amplify app with the Vite framework.

UpdatedJuly 9, 2023

My name is Lorenzo Sfienti, and I am a Software Engineer born in 1984. From an early age, I developed a deep passion for coding, and it has become my primary focus and source of inspiration throughout my career.

I thrive in the exciting and ever-evolving world of cloud infrastructure. With a profound understanding of the cloud ecosystem, I have honed my skills in leveraging cutting-edge technologies to build robust and scalable systems. One of my areas of expertise is Docker, which I utilize to containerize applications and streamline the development and deployment process. By harnessing the power of Docker, I enable seamless scalability and enhance overall performance.

In addition to my proficiency in cloud infrastructure, I have a strong background in WordPress development. With my in-depth knowledge of WordPress architecture and extensive experience in customizing themes and plugins, I have successfully delivered numerous impactful websites and web applications. I enjoy the creative aspect of working with WordPress and finding innovative solutions to meet my client's unique requirements.

To further augment my skill set, I have embraced Terraform as a powerful tool for infrastructure as code. With Terraform, I can define and provision cloud infrastructure resources efficiently, allowing for rapid deployment and reducing operational complexities. By adopting this approach, I ensure that my projects are scalable, reproducible, and well-optimized.

As a Software Engineer, I bring not only technical expertise but also strong collaboration skills. I thrive in cross-functional teams, effectively communicating complex technical concepts to stakeholders and clients. I believe that teamwork and effective communication are crucial for successful project execution.

Outside of my professional life, I am an avid learner and enjoy exploring the latest technological advancements. I believe in continuous learning and growing to remain at the forefront of my field.

With my unwavering passion for code, and expertise in cloud infrastructure, Docker, WordPress, and Terraform, I am committed to delivering innovative solutions that drive business success. I strive to make a meaningful impact in the software engineering world, leveraging my skills and knowledge to create robust, scalable, and efficient systems.

This is the second article of my series "Amplify Adventures". If you want to read the first article:

https://lorenzosfienti.dev/getting-started-with-aws-amplify-a-beginners-guide

TL;DR

Create AWS Credentials to deploy Amplify app
Create a simple Vite app
Configure amplify project
Publish amplify app

Create AWS Credentials to deploy Amplify app

Sign in to the AWS Management Console: Go to the AWS Management Console website (https://console.aws.amazon.com) and sign in using your AWS account credentials.
Open the IAM service: Once you're logged in, search for "IAM" (Identity and Access Management) in the AWS Management Console search bar and select the IAM service.
Create an IAM user: In the IAM console, click on "Users" in the left-hand navigation pane and then click on the "Add user" button.
Set user details: Enter a name for your user (e.g., "AmplifyDeployUser") and select the access type. For deploying an Amplify app, you'll need to select "Programmatic access."
Set permissions: In the "Set permissions" section, choose "Attach existing policies directly." Search for and select the policy "AWSAmplifyFullAccess." This policy provides the necessary permissions for Amplify app deployment.
Review and create a user: Skip the "Add tags" section (unless you need to add tags) and click on the "Next: Review" button.
Review and create a user: Review the user details and the permissions. If everything looks correct, click on the "Create user" button.
Download or copy credentials: After the user is created, you will see a "Success" message. Make sure to copy or download the access key ID and secret access key. These are your AWS credentials that you'll use for deploying the Amplify app.

It's important to note that the secret access key is only shown once. If you lose it, you'll need to generate a new access key. Therefore, it's a good practice to securely store your AWS credentials.

Once you have your AWS credentials, you can add them inside your .aws/credentials like this:

[AmplifyDeployUser]
aws_access_key_id=XXX
aws_secret_access_key=XXX

After add inside your .aws/config the new profile like this:

[profile AmplifyDeployUser]
region=us-east-1

Create a simple Vite app

For this first app, I will use Vite to create a simple app.

npm create vite@latest amplify-example -- --template react-ts

A new Vite project it's created. Now goes inside the directory and install the npm package

Configure Amplify project

It's time to configure your Amplify project!

Inside the directory of your project run amplify init

For this specific project we need to change the Distribution Directory Path.

After doing that we need to add hosting service for this project. To do that run the command amplify hosting add

For this project, we use the default Hosting with Amplify Console. In a future article, we will understand the differences between the two options.

About the option of deployment we choose Manual deployment.

It's time now to publish your project!

Run amplify publish

Congratulations you publish your first Amplify app.

In the next article, we will see the auth features.

I create a mini repo with an example of first Amplify App:

https://github.com/lorenzosfienti/amplify-first-example

If you like this article share it with your friends. If you have any questions write a comment.

Create your first Amplify app

Comments

Amplify Adventures: Unleashing the Power of AWS Amplify

Getting Started with AWS Amplify: A Beginner's Guide

More from this blog

Integrate Amplify Auth in your Amplify first app

Getting Started with AWS Amplify: A Beginner's Guide

TL;DR

Create AWS Credentials to deploy Amplify app

Create a simple Vite app

Configure Amplify project

Command Palette

Comments

Amplify Adventures: Unleashing the Power of AWS Amplify

Getting Started with AWS Amplify: A Beginner's Guide

More from this blog

TL;DR

Create AWS Credentials to deploy Amplify app

Create a simple Vite app

Configure Amplify project