Create your first Amplify app
In this episode, we create your first Amplify app with the Vite framework.
This is the second article of my series "Amplify Adventures". If you want to read the first article:
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 (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:
If you like this article share it with your friends. If you have any questions write a comment.