Deploying Static React app on AWS S3 Bucket

Saquib Hussain — Thu, 24 Oct 2024 12:19:54 +0000

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.

DEV Community: Saquib Hussain