rupeshtiwari/getting started with aws amplify.md

## getting started with aws amplify.md

      
    Raw
  

              getting started with aws amplify.md
            
          
    Getting started with aws amplify

Sure, let's use AWS Amplify to set up and host your Live App.
AWS Amplify simplifies the process of building, deploying, and hosting web applications. Here's a step-by-step guide to create and deploy a simple HTML-based Quip Live App using AWS Amplify.
Step 1: Set Up Your AWS Amplify Project


Install Amplify CLI:

Make sure you have Node.js and npm installed.
Install the Amplify CLI globally.

npm install -g @aws-amplify/cli


Configure Amplify CLI:

Configure the Amplify CLI with your AWS credentials.

amplify configure
Follow the prompts to set up your AWS IAM user.


Initialize a New Amplify Project:

Navigate to your project directory and initialize a new Amplify project.

mkdir sa-activity-tracker
cd sa-activity-tracker
amplify init
Follow the prompts:

Enter a name for the project: sa-activity-tracker
Enter a name for the environment: dev
Choose your default editor: (select your preferred editor)
Choose the type of app that you're building: JavaScript
What JavaScript framework are you using: None
Source Directory Path: src
Distribution Directory Path: build
Build Command: npm run build
Start Command: npm start


Step 2: Set Up Your Project Files


Create Project Structure:

Create the necessary directories and files.

mkdir src
touch src/index.html
touch src/app.js
touch src/styles.css


Add Content to index.html:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SA Activity Tracker</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="root"></div>
    <script src="app.js"></script>
</body>
</html>


Add Content to styles.css:
body {
    font-family: Arial, sans-serif;
}

#root {
    padding: 20px;
}


Add Content to app.js:
document.getElementById('root').innerHTML = `
    <h1>SA Activity Tracker</h1>
    <p>This is a simple Quip Live App.</p>
`;


Step 3: Deploy Your Project with Amplify


Add Hosting to Your Amplify Project:
amplify add hosting
Follow the prompts:

Select the plugin module to execute: Amazon CloudFront and S3
Environment setup: PROD (S3 with CloudFront using HTTPS)
Hosting bucket name: (default or custom name)
Index document: index.html
Error document: index.html


Publish Your App:
amplify publish
This command will build your project, deploy it to an S3 bucket, and configure CloudFront for CDN.


Step 4: View app


Get the URL of Your Deployed App:

After deploying, Amplify will provide a URL where your app is hosted.