DEV Community

Shaakthi Ganapathi
Shaakthi Ganapathi

Posted on

Static Webpage Hosting (S3 + Cloud front) - React app

In this blog, we'll cover how to host a static React web application using Amazon S3 and CloudFront. To get started, let’s focus on the initial steps: setting up the environment, creating the React app, and preparing the S3 bucket.

Step 1: Install Node.js and npm
Before creating a React app, ensure you have Node.js and npm installed on your machine.

Download and Install Node.js

Visit the Node.js website and download the LTS version.
Install Node.js following the setup instructions for your operating system.
Verify Installation
Open a terminal or command prompt and run the following commands to confirm Node.js and npm are installed:

                node -v
                npm -v
Enter fullscreen mode Exit fullscreen mode

This will display the installed versions of Node.js and npm.

Step 2: Create a React Application
Now, let’s create the React application that we’ll host.

Initialize a React App
Use the npx command to create a new React app:

      npx create-react-app static-webpage-hosting
Enter fullscreen mode Exit fullscreen mode

Replace static-webpage-hosting with your desired project name.
Navigate to the Project Directory

          cd static-webpage-hosting
Enter fullscreen mode Exit fullscreen mode

Start the Development Server
To test your setup, start the local development server:

          npm start
Enter fullscreen mode Exit fullscreen mode

This will open your default browser and display the default React application at http://localhost:5173.

Image description

Step 3: Customize the React App
Next, customize the React app with your details. For example:

Open the src/App.js file in your favorite code editor.
Replace the content with the following code to display your name and roll number:

                  import './App.css';
Enter fullscreen mode Exit fullscreen mode

function App() {
return (

  display: 'flex',<br>
  flexDirection: 'column',<br>
  alignItems: 'center',<br>
  justifyContent: 'center',<br>
  height: '100vh',<br>
  background: 'linear-gradient(135deg, #1e90ff, #ff7f50)',<br>
  color: 'white',<br>
  fontFamily: 'Arial, sans-serif',<br>
  textAlign: 'center',<br>
}}&gt;<br>
  <h1>Shaakthi Ganapathi P D</h1><br>
  <h2>Roll Number: 714022202045</h2><br>
  <p>"NOTHING TO SAY!"</p><br>
<br>
Enter fullscreen mode Exit fullscreen mode

);

}

export default App;
Save the file and verify the changes by running the app again with npm start.

Image description

Image description

Image description

Step 4: Create an S3 Bucket
Now that your React app is ready, we need to create an Amazon S3 bucket for hosting the static files.

Log in to AWS Management Console

Go to the AWS Management Console.
Navigate to S3

Search for “S3” in the AWS services search bar and open the S3 dashboard.
Create a New Bucket

Click "Create Bucket".
Enter a unique bucket name, e.g., static-webpage-hosting.
Choose a region close to your users for better performance.
Uncheck "Block all public access" since we need to make the bucket publicly accessible for static hosting.
Review and Create

Review the settings and click "Create Bucket".

Image description

Image description

Image description

Image description

Step 5: Configure CloudFront
1.Go to the CloudFront service in AWS.
2.Click "Create Distribution".
3.In the Origin Settings:Set the Origin Domain Name to your S3 bucket's URL.
4.Enable Redirect HTTP to HTTPS for secure access.
5.In the distribution settings:Set index.html as the Default Root Object.
Click Create and wait for the distribution status to change to Deployed.

Image description

Image description

Step 6:Delete Cloud Front

Image description

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs