DEV Community

Harshad D
Harshad D

Posted on

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

Hosting a static React application on AWS using S3 and CloudFront is an excellent way to deploy a performant, globally distributed web application. This guide will cover the steps up to creating an S3 bucket.

Step 1: Create a React App
Before we deploy, we need to create a React app. To do this, ensure Node.js and npm (Node Package Manager) are installed on your system.

1.1 Install Node.js and npm

Node.js is a runtime environment for executing JavaScript code, and npm
is its accompanying package manager.

  • Download and install Node.js from the official website.
  • Verify installation:

           node -v
           npm -v
    

1.2 Create the React App

With Node.js installed, you can use the npx command to create a new React app.

  • Open a terminal and run the following command:

          npx create-react-app my-react-app
    
  • Navigate to the project directory:

          cd my-react-app
    

1.3 Customize the App (Add Host Name and Roll Number)

  1. Open the project in your favorite code editor (e.g., VS Code).
  2. Navigate to the src/App.js file.
  3. Replace the content with the following:

          import './App.css';
          function App() {
            return (
              <div style={{ textAlign: 'center', marginTop: '20%' }}>
                <h1>Harshad D</h1>
                <h2>Roll Number: 714022202023</h2>
              </div>
            ); 
          } 
          export default App;
    
  4. Save the file.

Image description

1.4 Test the App

  • Run the app locally:

       npm start
    
  • Open your browser and navigate to http://localhost:5173/. You should
    see your name and roll number displayed on the page.

Image description

Step 2: Create an S3 Bucket

AWS S3 (Simple Storage Service) is an object storage service that can be used to host static websites. Follow these steps to create an S3 bucket.

2.1 Log in to AWS

  • Go to the AWS Management Console.
  • Log in with your AWS account credentials.

2.2 Create a Bucket

  1. Navigate to the S3 service.
  2. Click the Create bucket button.
  3. Fill in the following details:

    • Bucket Name: Enter a unique name (e.g., my-react-app-bucket).
    • AWS Region: Choose the region closest to your target audience.
  4. Uncheck the Block all public access option to allow public access
    (required for hosting).

  5. Confirm the change and proceed.

  6. Click Create bucket.

2.3 Configure the Bucket for Static Hosting

  1. After the bucket is created, click on its name to access the bucket settings.
  2. Go to the Properties tab.
  3. Scroll down to the Static website hosting section and click Edit.
  4. Enable static website hosting and specify the following:
    • Index document: index.html
    • (Optional) Error document: error.html
  5. Save the changes.

Image description

Step 3: Build and Upload the React App to S3

3.1 Build the React App

To prepare your React app for production, run the following command in the project directory:

       npm run build
Enter fullscreen mode Exit fullscreen mode

This will generate a build folder containing optimized files for deployment.

3.2 Upload Files to the S3 Bucket

  1. In the AWS Management Console, go to your S3 bucket.
  2. Click the Upload button.
  3. Drag and drop all the files from the build folder into the upload area.
  4. Click Upload to start the process.

Image description

3.3 Test the S3 Bucket

  • Once the files are uploaded, go to the Properties tab of your S3 bucket.
  • Under Static website hosting, you will see a Bucket website endpoint. Open this URL in your browser to view your React app.

Image description

Step 4: Configure CloudFront for S3 Hosting

To enhance performance and provide a secure, globally distributed setup, integrate your S3 bucket with CloudFront.

4.1 Create a CloudFront Distribution

  1. Navigate to the CloudFront service in the AWS Management Console.
  2. Click Create Distribution.
  3. Select Web and configure the following:
- Origin Domain Name: Choose your S3 bucket from the dropdown.
- Viewer Protocol Policy: Redirect HTTP to HTTPS.
Enter fullscreen mode Exit fullscreen mode

Image description

4.2 Update S3 Bucket Permissions

  • Ensure your S3 bucket allows access from CloudFront by setting up the appropriate bucket policy.

4.3 Test CloudFront

  • Once the distribution status changes to Deployed, copy the Domain Name from the CloudFront dashboard.
  • Open this URL in your browser to view your React app served via CloudFront.

Image description

Image description

Step 5: Deleting CloudFront to Avoid Charges

If you no longer need the CloudFront distribution, it is crucial to delete it to avoid unnecessary charges.

5.1 Disable and Delete the CloudFront Distribution

  1. Navigate to the CloudFront service in the AWS Management Console.
  2. Select your distribution and click Disable. Wait until the status changes to Disabled.
  3. Once disabled, select the distribution again and click Delete.

Image description

5.2 Verify Deletion

Ensure the distribution is no longer listed in the CloudFront dashboard.

Image description

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more