Create React App Host in Amplify, aws amplify, react app

Create React App Host in Amplify.md

Great, let's create a React application called "Activity Logger" and host it using AWS Amplify with Git integration. Here’s a step-by-step guide:

Step 1: Set Up the React App

1. Install Node.js: Make sure you have Node.js and npm installed. You can download and install it from nodejs.org.

2. Create a New React App: Use Create React App to bootstrap your React project.

   npx create-react-app activity-logger
   cd activity-logger

3. Run the App Locally: Ensure the app runs locally before deploying.

   npm start

   You should see the default React application running at http://localhost:3000.

   

Step 2: Set Up AWS Amplify

1. Install Amplify CLI: Install the Amplify CLI globally if you haven’t already.

   npm install -g @aws-amplify/cli

2. Configure Amplify CLI: Configure the Amplify CLI with your AWS credentials.

   amplify configure

   Follow the prompts to set up your AWS IAM user.

3. Initialize Amplify in Your Project: Initialize a new Amplify project in your React app directory.

   amplify init

   Follow the prompts:

   • Enter a name for the project: activitylogger
   • 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: React
   • Source Directory Path: src
   • Distribution Directory Path: build
   • Build Command: npm run build
   • Start Command: npm start

4. Add Hosting to Your Amplify Project: Add hosting to your Amplify project to set up hosting with Amazon S3 and CloudFront.

   amplify add hosting

   Follow the prompts:

   • Select the plugin module to execute: Hosting with Amplify Console (Managed hosting with custom domains, Continuous integration)
   • Choose a type: Continuous deployment (Git-based deployments)

5. Deploy Your App: Deploy your application to AWS Amplify.

   amplify publish

   Follow the prompts to connect your GitHub repository. You’ll need to authenticate with GitHub and select the repository and branch for deployment.

Step 3: Configure Your GitHub Repository

1. Create a GitHub Repository: Create a new repository on GitHub for your project.

2. Push Your Local Project to GitHub: Initialize a new Git repository in your project directory and push the code to GitHub.

   git init
   git remote add origin https://github.com/your-username/activity-logger.git
   git add .
   git commit -m "Initial commit"
   git push -u origin master

Step 4: Connect GitHub Repository to Amplify

1. Log in to the AWS Amplify Console: Go to the AWS Amplify Console.

2. Connect the GitHub Repository: In the Amplify Console, find your Amplify app and connect it to your GitHub repository by following the prompts. This will set up continuous deployment for your app.

Step 5: Modify the React App

You can now modify your React app to include the functionality for the "Activity Logger". Here’s a simple example to get you started:

1. Modify src/App.js:

   import React, { useState } from 'react';
   import './App.css';
   
   function App() {
     const [activities, setActivities] = useState([]);
     const [activity, setActivity] = useState('');
   
     const handleAddActivity = () => {
       if (activity.trim()) {
         setActivities([...activities, activity]);
         setActivity('');
       }
     };
   
     return (
       <div className="App">
         <header className="App-header">
           <h1>Activity Logger</h1>
           <input
             type="text"
             value={activity}
             onChange={(e) => setActivity(e.target.value)}
             placeholder="Enter an activity"
           />
           <button onClick={handleAddActivity}>Add Activity</button>
           <ul>
             {activities.map((activity, index) => (
               <li key={index}>{activity}</li>
             ))}
           </ul>
         </header>
       </div>
     );
   }
   
   export default App;

2. Modify src/App.css:

   .App {
     text-align: center;
   }
   
   .App-logo {
     height: 40vmin;
     pointer-events: none;
   }
   
   .App-header {
     background-color: #282c34;
     min-height: 100vh;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     font-size: calc(10px + 2vmin);
     color: white;
   }
   
   .App-link {
     color: #61dafb;
   }
   
   input {
     padding: 10px;
     margin: 10px;
     font-size: 1rem;
   }
   
   button {
     padding: 10px;
     font-size: 1rem;
     cursor: pointer;
   }
   
   ul {
     list-style-type: none;
     padding: 0;
   }
   
   li {
     background: #61dafb;
     margin: 5px 0;
     padding: 10px;
     border-radius: 5px;
     color: #282c34;
   }

Step 6: Push Changes to GitHub

Whenever you make changes to your React app, commit and push the changes to your GitHub repository. AWS Amplify will automatically detect the changes and redeploy your app.

git add .
git commit -m "Add activity logger functionality"
git push

Summary

By following these steps, you’ve created a simple React application called "Activity Logger" and hosted it on AWS Amplify with continuous deployment from GitHub. This setup allows you to easily develop and deploy your application with minimal overhead. You can now enhance your app by adding more features and functionality as needed.

Scripts

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build-publish": "npm run build && amplify publish",
    "amplify-mock": "amplify mock",
    "start-with-mock": "concurrently \"npm run start\" \"npm run amplify-mock\""
  },
  "devDependencies": {
    "concurrently": "^6.5.1",
    "serve": "^11.3.2"
  },

References

https://docs.amplify.aws/gen1/javascript/tools/cli/start/set-up-cli/