DEV Community: Nir Tzezana

Streamlining Next.js Deployment with AWS Amplify: Features and Budget Considerations

Nir Tzezana — Tue, 31 Dec 2024 06:29:44 +0000

Ever wanted to work with NextJS but failed to find a good place to deploy your apps to?
Well, as it turns out, Amazon AWS has the answer for you, AWS Amplify.

But first things first - Let's create our brand new NextJS app.
Open a terminal and type

npx create-next-app@latest amplify-nextjs-app
cd amplify-nextjs-app

This will create an amplify-nextjs-app folder and will get us into that folder.

Now we'll go to Github and create a new private project, and we'll attach our current NextJS project to the Github repo.

Let's attach the repo to our project

git remote add origin 
https://github.com/[your username]/amplify-nextjs-app.git
git branch -M main
git push -u origin main

The hard part is behind us, now we can move on to deploying the app.

Setting up Amplify is pretty straightforward, go into AWS console and look for Amplify.

In Amplify, click on "Deploy an app" and then select "Github"

After connecting Amplify to GitHub, you’ll gain access to a list of all your repositories. Locate and select the newly created amplify-nextjs-app repository. Amplify is designed to automatically detect the framework your app is built on, and in this case, it should identify your project as a Next.js application.

Once the setup is recognized, simply click "Next" to confirm the configuration. Then, proceed by clicking "Save and Deploy" to start the deployment process. Amplify will initiate the build, provision resources, and deploy your application. This process typically takes just a few moments, and once complete, your app will be live and accessible via a generated URL.

You can now visit the provided URL to see your Next.js app up and running on AWS Amplify!

That was easy!

Adding a Custom Domain to Your Amplify App

One of the great features of AWS Amplify is the ability to connect your deployed app to a custom domain, giving it a professional and branded URL. To set up a custom domain, go to the Amplify console, select your app, and navigate to the "Domain management" section. From there, you can add your domain by specifying your domain provider (like Route 53, GoDaddy, or Namecheap) and following the guided steps to configure DNS settings. Amplify even provides HTTPS certificates through AWS Certificate Manager, ensuring secure communication for your users. With just a few clicks, your app will be accessible through a custom URL that aligns with your brand.

Now let's talk costs:

Amplify charges you for 3 things:

Build and deploy time
Storage
Bandwidth

Suppose your app builds every day (30 times a month), weighs about 10MB and has a traffic of 5000 users a month.

Build & Deploy Cost

Build time: 2 minutes per build.
Number of builds: 30 builds per month.
Cost per minute: $0.01.

Storage Cost

App size: 10 MB = 0.01 GB.
Storage pricing: $0.023 per GB per month.

Bandwidth Cost

App size: 10 MB = 0.01 GB.
Users: 5,000 per month.
Data transferred: Each user downloads the app (assuming one download per user).
Total bandwidth: 5000 * 0.01GB = 50GB.
Bandwidth pricing: $0.15 per GB.

Total: $0.60 (Build and Deploy) + $0.01 (Storage) + $7.50 (Bandwidth)

This totals for:

$8.11 / month

This equates and even wins other hosting services and may benefit you if you're using more services from AWS.

Streaming live data to your ReactJS app using Server-Sent-Events (SSE)

Nir Tzezana — Thu, 12 Dec 2024 06:59:24 +0000

Have you ever wanted to stream data to your ReactJS app in real time? Maybe show a popup message or shut down the app completely without waiting for a polling solution?

As it turns out, the solution existed since around 2010 and is now fully supported in all major browsers.

Let’s explore Server-Sent Events (SSE), compare them to other real-time data solutions, and implement a robust example using a modern ReactJS app created with Vite.

Overview of Real-Time Data Solutions

When talking about real-time data solutions for ReactJS (or any other JS application), we have a few options:

Polling (not really real-time)
Long-Polling
WebSockets
Server-Sent Events (SSE)

Here’s how they compare:

Feature/Criteria	Polling	Long-Polling	WebSockets	Server-Sent-Events (SSE)
Real-Time	No (delay due to interval)	Yes (semi-real-time)	Yes (true real-time)	Yes (true real-time)
Ease of Implementation	Yes (simple)	Yes (moderately simple)	No (requires more setup)	Yes (built-in browser support)
Browser Support	Yes (all browsers)	Yes (all browsers)	Yes (modern browsers)	Yes (modern browsers)
Efficiency	No (constant requests)	No (open connections)	Yes (optimized for real-time)	Yes (low overhead)
Bi-Directional Communication	No (client-to-server only)	No (client-to-server only)	Yes (full-duplex)	No (server-to-client only)
Reconnection Handling	No (manual logic)	Yes (built-in retry)	No (manual logic)	Yes (auto-reconnect by default)
Use Case Examples	Periodic updates (e.g., refreshing feeds)	Semi-real-time notifications	Chat apps, live games	Real-time notifications, stock tickers

If your use case involves getting events from the server only, SSE is a simple, efficient, and reliable solution.

Backend Implementation

We’ll use an Express.js server for the backend. Follow these steps:

Basic Express Setup

Start with a basic Express server:

const express = require('express');
const app = express();
const PORT = 3010;

app.use(express.json());

app.get('/events', (req, res) => {
    res.status(200).send('Event route is working');
});

app.listen(PORT, () => {
    console.log(`SSE server running on http://localhost:${PORT}`);
});

Adding SSE-Specific Headers

Add headers to enable SSE:

app.get('/events', (req, res) => {
    res.setHeader('Content-Type', 'text/event-stream');
    res.setHeader('Cache-Control', 'no-cache');
    res.setHeader('Connection', 'keep-alive');

    res.write(`data: Connected to SSE\n\n`);
});

Sending Periodic Messages

Send updates periodically to connected clients:

app.get('/events', (req, res) => {
    res.setHeader('Content-Type', 'text/event-stream');
    res.setHeader('Cache-Control', 'no-cache');
    res.setHeader('Connection', 'keep-alive');

    res.write(`data: Connected to SSE\n\n`);

    const interval = setInterval(() => {
        const message = { time: new Date().toISOString() };
        res.write(`data: ${JSON.stringify(message)}\n\n`);
    }, 2000);

    req.on('close', () => {
        clearInterval(interval);
        res.end();
    });
});

Enabling CORS

To avoid cross-origin issues, add:

const cors = require('cors');
app.use(cors());

Frontend Implementation Using Vite and ReactJS

Setting Up the Project

Create a new Vite project with ReactJS and TypeScript:

npm create vite@latest sse -- --template react-ts
cd sse
npm install

Setting Up the Component

Edit the App.tsx file to include useEffect and useState hooks:

import { useEffect, useState } from "react";
import "./App.css";

function App() {
  const [messages, setMessages] = useState("");

  useEffect(() => {
    const eventSource = new EventSource("http://localhost:3010/events");

    eventSource.onmessage = (event) => {
      console.log("Received event:", event.data);
      setMessages(event.data);
    };

    eventSource.onerror = (error) => {
      console.error("EventSource failed:", error);
    };

    return () => {
      eventSource.close();
    };
  }, []);

  return (
    <div>
      <h1>Real-Time Messages</h1>
      <p>{messages}</p>
    </div>
  );
}

export default App;

Advanced Topics

Security Considerations

Authentication: Secure your SSE endpoint using tokens:

app.get('/events', authenticate, (req, res) => { ... });

Rate Limiting: Use middleware like express-rate-limit to prevent abuse.

Scaling SSE

Load Balancers: Use NGINX or HAProxy to efficiently manage SSE connections.
Connection Limits: Implement logic to cap active connections for better scalability.

Debugging SSE

Use curl to test your endpoint:

curl http://localhost:3010/events

Monitor browser DevTools for network activity and messages.

Custom Event Types

SSE supports custom event types using the event: keyword:

res.write(`event: customEvent\n`);
res.write(`data: {"info": "custom event triggered"}\n\n`);

Handle them on the frontend:

eventSource.addEventListener('customEvent', (event) => {
  console.log('Custom Event:', event.data);
});

Conclusion

With Vite and ReactJS as the frontend framework and a lightweight Express backend, we’ve implemented a robust, scalable real-time solution using Server-Sent Events. The combination of simplicity, efficiency, and modern browser support makes SSE an excellent choice for unidirectional real-time data delivery.