DEV Community: CodingTechMan

Simple Tutorial: A Dockerized Node.js, React and Next.js Application

CodingTechMan — Fri, 09 Aug 2024 05:06:52 +0000

Simple Tutorial: A Dockerized Node.js, React and Next.js Application

This is a simple tutorial aimed at showing you how to get a simple Node.js, Next.js and React App up and running with Docker on your local machine. It is aimed at beginner web developers looking to start a web project.

After following this tutorial, we should have a React + Next.js frontend application and it pulls data from a Node.js backend application.

Prerequisites: Install Git, Docker, and Docker-Compose

The prerequisites to complete this tutorial are git, Docker and Docker-Compose. These links should take you to the installation page for each software.

Git: Allows you to download the provided repository in Step 1.
Docker: Allows us to run code in containers, regardless of environment
Docker-Compose: Allows us to run multiple containers easily, we have both a frontend and a backend container in this project.

Step 1: Copy the Sample Application

We’ve provided a simple application for you to clone at the link below. Simply use git clone https://github.com/EMChamp/simple-nodejs-react-docker-app to clone the repo to your local machine.

Repo Page

Here is what the directory layout should look like. It isn’t important to understand every file, just check that you have a client directory, server directory, and docker-compose.yml in your directory.

Step 2: Run on Docker

Use the following command in the simple-nodejs-react-docker-app directory docker-compose up

If all goes well we should see this output:

Step 3: Visit Website

In your web browser visit http://localhost:5041/, you should see the following page:

The string “Data from Backend API” is pulled from the backend and displayed on the page.

Now we have finished the tutorial and have a working Node.js, React and Next.js application running on Docker. As next steps you can choose to modify the code to suit an application that you would like to build.

In the next optional section, we will walk through the code.

Code Walkthrough

While it is not necessary to read this section to run the project, it may be useful as a reference to understand what the files do and what they affect if you plan to modify the code.

Here is what the directory contents should look like. It isn’t important to understand every file (which is covered below), just check that you have a client **directory, **server **directory, and **docker-compose.yml

simple-nodejs-react-docker-app/
├── client/
│   ├── package.json
│   ├── package-lock.json
│   ├── public/
│   │   ├── favicon.ico
│   ├── styles/
│   │   ├── styles.css
│   ├── pages/
│   │   ├── _app.tsx
│   │   ├── index.tsx
│   ├── tsconfig.json
├── server/
│   ├── package.json
│   ├── package-lock.json
│   ├── server.js
│   ├── Dockerfile
└── docker-compose.yml

Client

This section will cover the important files in the client directory and their purpose.

package.json will define the dependencies we need to run the application. It will also define our start and build commands.

{
  "name": "client",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "next dev -p $PORT",
    "build": "next build",
    "start": "next start -p $PORT"
  },
  "dependencies": {
    "axios": "^0.21.1",
    "next": "latest",
    "react": "latest",
    "react-dom": "latest"
  },
  "devDependencies": {
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "typescript": "^4.7.0"
  }
}

src/pages/index.tsx will define the main page our application loads. It will display a simple page with a header saying “Simple Node.js and React App”. It will then load a string from http://localhost:5040/endpoint which is an endpoint defined by the server that is running on our local machine. This string is then used to populate the page.

import React, { useEffect, useState } from 'react';
import axios from 'axios';

const Home: React.FC = () => {
  const [data, setData] = useState<string>('');
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<string>('');

  useEffect(() => {
    axios.get('http://localhost:5040/endpoint')
      .then(response => {
        setData(response.data);
        setLoading(false);
      })
      .catch(error => {
        setError('Failed to fetch data');
        setLoading(false);
      });
  }, []);

  return (
    <div className="container">
      <header className="header">
        <h1>Simple Node.js and React App</h1>
        <p>The data below is populated by our Node.js Backend. This page is build with React.</p>
      </header>
      <main className="content">
        {loading ? (
          <p>Loading...</p>
        ) : error ? (
          <p>{error}</p>
        ) : (
          <section>
            <h2>API Data</h2>
            <p>{data}</p>
          </section>
        )}
      </main>
    </div>
  );
};

export default Home;

src/pages/_app.tsx is the entry point for our application. It loads the global CSS stylesheet for all pages, including index.tsx and any future pages. The MyApp function wraps all our pages and ensures they have the necessary global styles and settings. Next.js handles Server-Side Rendering (SSR) by default, allowing pages to be rendered on the server before being sent to the client.

// _app.tsx
import '../styles/styles.css'; // Adjust path according to your structure

import type { AppProps } from 'next/app';

function MyApp({ Component, pageProps }: AppProps) {
  return (
      <Component {...pageProps} />
  );
}

export default MyApp;

src/styles/styles.css defines simple styling for our rendered web page.

body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
  }

  .container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }

  .header {
    text-align: center;
    padding: 20px 0;
    border-bottom: 1px solid #ddd;
  }

  .header h1 {
    margin: 0;
    font-size: 2.5em;
    color: #0070f3;
  }

  .header p {
    margin: 0;
    font-size: 1.2em;
    color: #555;
  }

  .content {
    padding: 20px 0;
  }

  .content section {
    margin-bottom: 20px;
  }

  .content h2 {
    margin-top: 0;
    font-size: 1.8em;
    color: #0070f3;
  }

  .content p {
    font-size: 1em;
    line-height: 1.6;
    color: #555;
  }

Dockerfile configures a Docker container for a Next.js application. It uses the Node.js version 21 image, sets the working directory, copies the necessary files, installs dependencies, copies the application code, builds the Next.js application, exposes port 5041, and defines the command to start the application using npm start.

FROM node:21

WORKDIR /app

COPY package.json ./
COPY package-lock.json ./
RUN npm install

COPY . .

# Build the Next.js application
RUN npm run build

EXPOSE 5041

CMD ["npm", "start"]

Server Code

The server code is very simple in that it contains a barebones application.

├── server/
│   ├── package.json
│   ├── package-lock.json
│   ├── server.js
│   ├── Dockerfile

package.json defines the command to start our server on node.js and also the dependencies cors and express needed on the server.

{
    "name": "server",
    "version": "1.0.0",
    "main": "server.js",
    "scripts": {
      "start": "node server.js"
    },
    "dependencies": {
      "express": "^4.17.1",
      "cors": "^2.8.5"
    }
  }

server.js defines our server code using Express.js. It sets up an endpoint /endpoint that returns a string when accessed. The client can call this endpoint by sending a GET request to http://localhost:5040/endpoint to retrieve this data. CORS is configured to allow requests only from http://localhost, ensuring that only our client application can access this endpoint.

// server.js
const express = require('express');
const cors = require('cors');
const app = express();

// Use the PORT environment variable if it is set, otherwise default to 5040
const port = process.env.PORT || 5040;

// Enable CORS for specific origins
const corsOptions = {
  origin: 'http://localhost:5041',
};
app.use(cors(corsOptions));

app.get('/endpoint', (req, res) => {
  res.send('Data from Backend API');
});

app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

Dockerfile configures a Docker container for the server application. It uses the Node.js version 21 image as the base, sets the working directory to /app, copies the necessary files, installs dependencies, copies the application code, exposes port 5040, and defines the command to start the application using npm start.

Root Directory

The root directory only has one file called docker-compose.yml that is relevant to the project (README.md is only used to for GitHub purposes).

docker-compose.yml defines the frontend and backend containers that make up the application. It specifies the appropriate ports to be exposed on each container and binds them to the corresponding ports on the host machine. It also defines environment variables that set the port for the React and Node.js applications, and ensures that the frontend container depends on the backend container.version: '3.8'

services:
  backend_server:
    build: ./server
    ports:
      - "5040:5040"
    environment:
      - PORT=5040
  frontend_client:
    build: ./client
    ports:
      - "5041:5041"
    environment:
      - PORT=5041
    depends_on:
      - backend_server

Conclusion

This tutorial is hopefully helpful as a guide on how to dockerize your Node.js and React projects. Dockerization is helpful especially when you want to launch your application on different environments. Many popular tools like Kubernetes require the use of containers so this gives you a head start as well when deploying to production.

Real-Time Crypto Tracker using Webhooks with React, Next.js and Node.js

CodingTechMan — Fri, 09 Aug 2024 04:54:15 +0000

Real-Time Crypto Tracker using Webhooks with React, Next.js and Node.js

In this article we explore building a crypto tracker using webhooks with a Frontend built with React, Next.js which is connected to a Backend. Now typically a frontend is the one pulling all the data, but with websockets we can push data from a backend to the frontend.

Webhooks can be useful any time you need real-time updates on your frontend. Since Cryptocurrency prices change in real time this is a great use case for it. You can have a real-time dashboard that simply tracks crypto in real time without refreshing.

Prerequisites

CoinMarketCap API Key (Free Version is OK) — Required as this is our data source for cryptocurrency prices.
Node.js installed
Git for cloning

Repo Link

The code overview below covers the main part of the code, however to run the entire project I recommend using git clone on the repo link below to follow along.

https://github.com/EMChamp/cryptotracker-reactnode

Code Overview — Frontend

This code overview will look at the major pieces of the code and give an idea of their responsibilities.

frontend/App.js is the main page of our Next.js/React App where it will actively track a set of cryptocurrency symbols. We also have a websocket connection setup to our backend where we actively listen for price updates.

We also have a method for adding new cryptocurrency symbols to track. By default we are only tracking Bitcoin (BTC) and Ethereum Classic (ETC).

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import './App.css';

function App() {
  // Track symbols and prices
  const [prices, setPrices] = useState({});
  const [newSymbol, setNewSymbol] = useState('');
  const [trackingSymbols, setTrackingSymbols] = useState(['BTC', 'ETC']);

  // Listen for new webhook events from backend and update prices accordingly.
  useEffect(() => {
    const ws = new WebSocket('ws://localhost:5000');

    ws.onmessage = (event) => {
      const data = JSON.parse(event.data);
      setPrices(data);
    };

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

  // Handles adding new symbols to the tracking list
  const addSymbol = () => {
    if (newSymbol && !trackingSymbols.includes(newSymbol.toUpperCase())) {
      axios.post('http://localhost:5000/add-symbol', { symbol: newSymbol })
        .then(response => {
          setTrackingSymbols(response.data.symbols);
          setNewSymbol('');
        })
        .catch(error => {
          console.error('Error adding symbol:', error.response.data.message);
        });
    }
  };

  // UI/Frontend of the page
  return (
    <div className="App">
      <header className="App-header">
        <h1>CryptoTracker</h1>
      </header>
      <main>
        <div className="symbol-input">
          <input
            type="text"
            placeholder="Enter crypto symbol (e.g., BTC)"
            value={newSymbol}
            onChange={(e) => setNewSymbol(e.target.value)}
          />
          <button onClick={addSymbol}>Add Symbol</button>
        </div>
        <div className="symbol-tracker">
          {trackingSymbols.map((symbol) => (
            <div key={symbol} className="symbol-card">
              <h2>{symbol}</h2>
              <p>{prices[symbol] ? `$${prices[symbol].toFixed(2)}` : 'Loading...'}</p>
            </div>
          ))}
        </div>
      </main>
      <footer className="App-footer">
        <p>&copy; 2024 CryptoTracker. All rights reserved.</p>
      </footer>
    </div>
  );
}

export default App;

frontend/index.js is responsible for rendering App.js’ App component onto the browser.

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

frontend/App.css styles the HTML in the page above in a clean and modern look.

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
}

.App {
  text-align: center;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.App-header {
  background-color: #1a1a1a;
  color: white;
  padding: 20px;
  text-align: center;
  font-size: 1.5em;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.symbol-input {
  margin: 20px auto;
  display: flex;
  justify-content: center;
}

.symbol-input input {
  padding: 10px;
  font-size: 1em;
  width: 250px;
  margin-right: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.symbol-input button {
  padding: 10px 20px;
  font-size: 1em;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.symbol-input button:hover {
  background-color: #0056b3;
}

.symbol-tracker {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 20px;
}

.symbol-card {
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 20px;
  width: 200px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}

.symbol-card h2 {
  margin: 0;
  font-size: 1.2em;
}

.symbol-card p {
  margin: 10px 0 0;
  font-size: 1.1em;
  color: #333;
}

.symbol-card:hover {
  transform: translateY(-5px);
}

.App-footer {
  background-color: #1a1a1a;
  color: white;
  padding: 10px;
  text-align: center;
  margin-top: auto;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
}

Code Overview — Backend

backend/server.js is our backend server code. It is setup to poll CoinMarketCap’s API every 10 seconds for price changes and then push those changes via websocket to any connected frontend clients.

The endpoint /add-symbol takes requests from the frontend for any new symbols to track and appends it to the list of currently tracked symbols when we make the next API call to CoinMarketCap’s API for price changes.

We use the websocket library to handle the heavy lifting of managing websocket connections where it actively listens for any HTTPS connections that should be upgraded to websocket.

const express = require('express');
const axios = require('axios');
const WebSocket = require('ws');
const cors = require('cors');

const app = express();
app.use(cors());
const PORT = 5000;
const API_KEY = ''; // Replace with your CoinMarketCap API key
const INTERVAL = 10000; // Poll every 10 seconds

// List of cryptocurrencies to track
let symbols = ['BTC', 'ETC'];

// Create a WebSocket server
const wss = new WebSocket.Server({ noServer: true });

// Function to fetch cryptocurrency prices
const fetchPrices = async () => {
    try {
        const response = await axios.get('https://pro-api.coinmarketcap.com/v1/cryptocurrency/quotes/latest', {
            params: {
                symbol: symbols.join(','),
                convert: 'USD'
            },
            headers: {
                'X-CMC_PRO_API_KEY': API_KEY
            }
        });

        const prices = symbols.reduce((acc, symbol) => {
            acc[symbol] = response.data.data[symbol].quote.USD.price;
            return acc;
        }, {});

        return prices;
    } catch (error) {
        console.error('Error fetching data from CoinMarketCap:', error);
        return null;
    }
};

// Broadcast prices to all clients
const broadcastPrices = (prices) => {
    wss.clients.forEach(client => {
        if (client.readyState === WebSocket.OPEN) {
            client.send(JSON.stringify(prices));
        }
    });
};

// Periodically poll CoinMarketCap API and broadcast prices
setInterval(async () => {
    const prices = await fetchPrices();
    if (prices) {
        broadcastPrices(prices);
    }
}, INTERVAL);

// Handle HTTP and WebSocket connections
const server = app.listen(PORT, () => {
    console.log(`Server running on http://localhost:${PORT}`);
});

server.on('upgrade', (request, socket, head) => {
    wss.handleUpgrade(request, socket, head, (ws) => {
        wss.emit('connection', ws, request);
    });
});

// Endpoint for tracking new symbols
app.post('/add-symbol', (req, res) => {
    const { symbol } = req.body;
    if (!symbols.includes(symbol.toUpperCase())) {
        symbols.push(symbol.toUpperCase());
        res.status(200).send({ success: true, symbols });
    } else {
        res.status(400).send({ success: false, message: 'Symbol already being tracked' });
    }
});

Running the application

The code overview goes over the main parts of the code however it is not complete, so we would still recommend to clone the code from our GitHub repository in order to run it locally.

First you will have to replace API_KEY with your CoinMarketCap API Key.

Afterwards we can run the following commands which will go to each portion of the application, install their packages and then start the server.

cd frontend
npm install
npm start

cd ../backend
npm install
npm start

Now we should have our frontend server running on http://localhost:3000 and backend server on http://localhost:5000.

Going to our frontend on http://localhost:3000 will let us access this page where you can add Cryptocurrency symbols and then watch the application update in real time.