This content originally appeared on DEV Community and was authored by Saquib Hussain
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/
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 (
<div className="app">
<h1>My To-Do List</h1>
<form onSubmit={addTodo}>
<input
value={input}
onChange={(e) => setInput(e.target.value)}
placeholder="Add a task"
/>
<button type="submit">Add</button>
</form>
<div className="todo-list">
{todos.map((todo, index) => (
<ToDo
key={index}
todo={todo}
toggleComplete={() => toggleComplete(index)}
deleteTodo={() => deleteTodo(index)}
/>
))}
</div>
</div>
);
}
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 (
<div className={`todo ${todo.completed ? 'completed' : ''}`}>
<span onClick={toggleComplete}>{todo.text}</span>
<button onClick={deleteTodo}>Delete</button>
</div>
);
}
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/
5.Create a production build
npm run build
This command will create a build folder.
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.
The bucket name should be universally unique.
Uncheck the "Block all public access".
Scroll down and click on create bucket.
2.Uploading the contents of build folder to S3
Copy all the contents on build folder into the s3 bucket and click on upload.
In the properties tab,click on Edit on Static website hosting.
Enable the Static website hosting and give the entry file as index.html
And save changes.
3.Attaching policies to the S3 bucket.
Now in the permissions tab, click on Edit bucket policy.
copy the Amazon resource number and click on Policy generate
This will redirect you to AWS Policy Generator
- Select Policy Type :- S3 Bucket Policy
- Add Statements :- Principle - , Actions - GetObject, ARN - paste the ARN which was copied before. Click on **Add Statement *
- Generate Policy :- Click on Generate Policy.This will generate you the policy for the S3 bucket.
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.
In the permission section click on the Bucket website endpoint.
Congratulations you have successfully deployed your first React static website on AWS S3.
This content originally appeared on DEV Community and was authored by Saquib Hussain
Saquib Hussain | Sciencx (2024-10-24T12:19:54+00:00) Deploying Static React app on AWS S3 Bucket. Retrieved from https://www.scien.cx/2024/10/24/deploying-static-react-app-on-aws-s3-bucket/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.