Deploy Your Website in Minutes with AWS Amplify

Edithson Abelard
4 min readOct 22, 2019

--

Wouldn’t it be great if you can take your Build folder and deploy it directly onto the web and get a CDN and have it all hooked up in a matter of minutes? In this article, I’m gonna tell you how you can do that with AWS Amplify.

Getting Started

Search for AWS Amplify in the search bar
Step1: Search for AWS Amplify

From the AWS Console landing page, we can search for the AWS Amplify service by typing in “amplify” and hitting Enter. You can also hover over the “Services” drop-down menu and search for the “AWS Amplify”

Step 2: Click on “All Apps”

Then let’s look at the menu on the left-hand side and click on “All apps”.

Click on the connect app button
AWS Amplify Connect Application

If you did have or do have any apps connected you’ll see them here. If not, you can click on the “Connect app”.

2. Connecting Your App

AWS Amplify connection type git provider or deploy without git

You have a few options to connect. The newest option is to “Deploy without Git provider”, so let’s select that and hit “Continue”.

3. Configure and Deploy Your App

AWS Amplify Drag and Drop Manual Deploy

We have the option now to provide an app name, an environment name and a source method for our deploy. For the app name, I’m going to type in “clean_air”. For the environment, “dev”, and we’re going to choose “Drag and drop”. I’m gonna grab my Build folder and just drag it and drop it into this here area, and then I can click on the folder and see the contents of that folder.

Everything looks good, so I’m going to click “Save and deploy”.

4. Deployed Environment

AWS Amplify deployed app status
AWS Amplify deployed app status

Give it a couple of minutes, and it’s going to provide us with our domain, as well as the last time we updated our deployment, the status of our current deployment, which is now successful. We can click on the domain link and it’ll take us to our project url. If we wait a little bit we’ll see that our screenshot also was updated, so now we know what that deployment looks like.

5. General App Settings

AWS Amplify Application Settings

look at our app settings. Under “General” we have our app name, when it was created and the last time it was updated. There isn’t much you can change, but you can hit “Edit” and update your app name, as well as provide a service role.

6. Deploying New Environments

Drag and drop environment depot

Under “Environments”, we can edit current environments or add new ones. In our case let’s add a new environmen “prod”. I’ll choose the source method of “Drag and drop” again, and I’m going to drop my Build folder in. Take a look at its contents and make sure everything I wanted is in there. “Save and deploy”.

Multiple application environment deploys dev and prod

Once back to our app screen ,we’ll have a deployment for our “dev” as well as our “prod” environment. We can click on the domain linsk to check out our environments see side by side. After a few moments we will have an updated screenshot for a prod deveployment.

Domain Management

On the “Domain management” screen we can choose to provide a redirect domain, something that’s a little more user-friendly then “dev.d2zZ”, and we can do that for both our “dev” as well as our “prod” environment.

Email notifications

Setting up an email for deployments allow you to receive emails for every time a build starts, succeeds or fails.

Access Control

By default, your deployed environments are publicly accessable. You can change that on the “Access Control” page to require a username and pasword. At the moment you are limited to one per deployment, so you’ll have to share that usaername and password with whom ever you grant access to.

Thanks for reading this article on AWS Amplify. Please consider follwing me to stay up to date with all the latest in AWS Amplify. Leave a comment, I love reading them, and more importantly, I definitely do reply videos. So if you have any questions or comments or any feedback, make sure to drop a line for me in the comments section below.

--

--

Edithson Abelard

Software Engineer, Performance Optimization Expert, Engagement & Gamification Specialist, and Trainer #unity3d #AR #VR#vuejs #aws #fullstack #serverless