## This is the detailed procedure on how to create a static React application and deploy it on AWS S3 Bucket. ##Steps to create React Application: ####1. Initialize React App ``` npx create-react-app todo-app cd todo-app npm start ``` This will create a React app and start the development server on http://localhost:3000/ ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l6k1ufdvxa9cyrui1ykz.png) ####2.Create the Components We'll need two components: - App.js – Main component - ToDo.js – Individual task component. Modify src/App.js: Replace the contents of App.js with: ``` import React, { useState } from 'react'; import ToDo from './ToDo'; import './App.css'; function App() { const [todos, setTodos] = useState([]); const [input, setInput] = useState(''); const addTodo = (e) => { e.preventDefault(); if (input.trim()) { setTodos([...todos, { text: input, completed: false }]); setInput(''); } }; const toggleComplete = (index) => { const newTodos = [...todos]; newTodos[index].completed = !newTodos[index].completed; setTodos(newTodos); }; const deleteTodo = (index) => { setTodos(todos.filter((_, i) => i !== index)); }; return (

My To-Do List

{todos.map((todo, index) => ( toggleComplete(index)} deleteTodo={() => deleteTodo(index)} /> ))}

); } export default App; ``` Create src/ToDo.js : Add a new file ToDo.js in the src folder ``` import React from 'react'; import './ToDo.css'; function ToDo({ todo, toggleComplete, deleteTodo }) { return (

{todo.text}

); } export default ToDo; ``` ####3.Update CSS Styling Update App.css and create ToDo.css file in src folder for basic styling. src/App.css ``` /* Global Styles */ * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Poppins', sans-serif; } body { background-color: #121212; color: #e4e6eb; min-height: 100vh; display: flex; align-items: center; justify-content: center; } /* App Container */ .app { background-color: #1e1e2f; width: 400px; padding: 30px; border-radius: 15px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); text-align: center; } .app h1 { margin-bottom: 20px; font-size: 28px; color: #f8f9fa; letter-spacing: 1px; text-shadow: 1px 1px 2px #000; } /* Input and Add Button */ form { display: flex; margin-bottom: 20px; } input { flex: 1; padding: 12px; border-radius: 30px 0 0 30px; border: none; outline: none; background-color: #2b2b40; color: #fff; } button { background-color: #4caf50; border: none; border-radius: 0 30px 30px 0; color: white; width: 70px; cursor: pointer; font-weight: bold; transition: background-color 0.3s ease-in-out; } button:hover { background-color: #45a049; } /* Todo List */ .todo-list { max-height: 300px; overflow-y: auto; scrollbar-width: thin; } .todo-list::-webkit-scrollbar { width: 8px; } .todo-list::-webkit-scrollbar-thumb { background-color: #444457; border-radius: 5px; } ``` src/ToDo.css ``` .todo { display: flex; justify-content: space-between; align-items: center; background-color: #2e2e42; margin: 10px 0; padding: 15px; border-radius: 10px; transition: transform 0.2s, box-shadow 0.2s; } .todo:hover { transform: scale(1.05); box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); } .todo.completed span { text-decoration: line-through; color: #9e9e9e; } /* Todo Text */ .todo span { flex-grow: 1; font-size: 18px; padding-right: 10px; cursor: pointer; } /* Delete Button */ button { background-color: #ff5252; border: none; border-radius: 50%; width: 40px; height: 40px; color: white; font-weight: bold; cursor: pointer; transition: background-color 0.3s ease-in-out; } button:hover { background-color: #ff1744; } ``` ####4.Run the App ``` npm start ``` This will start the deployment server on http://localhost:3000/ ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1fr61e0o81ld4ztaycnj.png) ####5.Create a production build ``` npm run build ``` This command will create a build folder. ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1s3kgm3utgjsatyliku8.png) ##Hosting a static website on AWS S3: ##Steps to upload build files on S3 and make the bucket publicly available. If you have a react app,you can ignore the previous steps and continue from here. Here in the S3 bucked I will be uploading the contents of the build folder. ####1.Go to AWS S3 console and create a S3 bucket. ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9csv0zyglb19gqrufoww.png) The bucket name should be universally unique. ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9fwmecqi325q5h7672y0.png) Uncheck the "Block all public access". ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6797a01u9mto72sfwq60.png) Scroll down and click on **create bucket**. ####2.Uploading the contents of build folder to S3 ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/utzuc1yo22moqk0tt3oj.png) Copy all the contents on build folder into the s3 bucket and click on upload. ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iaqplwdzarz0qdinwng6.png) In the properties tab,click on **Edit** on Static website hosting. ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sc45fwacfwmfa1wure6w.png) Enable the Static website hosting and give the entry file as **index.html** ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tjp9ngg3ixg36ql8grr1.png) And save changes. ####3.Attaching policies to the S3 bucket. Now in the permissions tab, click on Edit bucket policy. ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/73k6jcjufbs7z43n37qx.png) copy the Amazon resource number and click on **Policy generate** ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ef6btitdwu15c0mwne3s.png) This will redirect you to AWS Policy Generator 1. Select Policy Type :- S3 Bucket Policy 2. Add Statements :- Principle - *, Actions - GetObject, ARN - paste the ARN which was copied before. Click on **Add Statement ** 3. Generate Policy :- Click on Generate Policy.This will generate you the policy for the S3 bucket. ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yjoma4posri3wkatspn4.png) ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/65bnuk3hpnodgcwpp8u8.png) **Example policy**, ``` { "Version": "2012-10-17", "Id": "Policy1729763909895", "Statement": [ { "Sid": "Stmt1729763901560", "Effect": "Allow", "Principal": "*", "Action": "s3:GetObject", "Resource": "arn:aws:s3:::demoreactdeploy/*" } ] } ``` Add **/*** at the end of the bucket name. ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fdzhq9obwmm0la0bl7ui.png) In the permission section click on the Bucket website endpoint. ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jl93ucgftil91z0bnn42.png) ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ep5eso5jaxd5n6pvrkt4.png) Congratulations you have successfully deployed your first React static website on AWS S3.

saquib_hussain_0d67ba0ead

Deploying Static React app on AWS S3 Bucket

Join Our Newsletter. No Spam, Only the good stuff.