How to Deploy an Express.js App on GitHub Pages Using GitHub Actions

Deploying an Express.js app on GitHub Pages might sound challenging at first, but with the right tools and steps, it becomes a seamless process. GitHub Pages only supports static sites, so we need to convert our dynamic Express.js app into static files. In this article, we'll walk through the steps to achieve this using Webpack for bundling and GitHub Actions for automation.

Step 1: Set Up Your Express.js App

First, ensure you have an Express.js app. If you don't have one, you can create a simple app as follows:

mkdir express-app
cd express-app
npm init -y
npm install express

Create a file named server.js:

const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(path.join(__dirname, 'dist')));

app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, 'dist', 'index.html'));
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

Step 2: Set Up Webpack

To bundle your app into static files, we'll use Webpack. Install Webpack and its dependencies:

npm install --save-dev webpack webpack-cli babel-loader @babel/core @babel/preset-env @babel/preset-react

Create a webpack.config.js file:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
    ],
  },
};

In your package.json, add a build script:

"scripts": {
  "build": "webpack --mode production"
}

Step 3: Create Your React Components

If you're using React with Express, create a simple React component. Create a directory src and an index.js file inside it:

import React from 'react';
import ReactDOM from 'react-dom';

const App = () => {
  return (
    <div>
      <h1>Hello, Express and React!</h1>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

Add an index.html file in the src directory:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Express App</title>
</head>
<body>
  <div id="root"></div>
  <script src="bundle.js"></script>
</body>
</html>

Step 4: Configure GitHub Actions

To automate the build and deployment process, create a GitHub Actions workflow. In your repository, create a .github/workflows/deploy.yml file:

name: Deploy Express.js App to GitHub Pages

on:
  push:
    branches:
      - main  # Trigger the workflow on push to the main branch

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout repository
      uses: actions/checkout@v2

    - name: Set up Node.js
      uses: actions/setup-node@v2
      with:
        node-version: '16'

    - name: Install dependencies
      run: npm install

    - name: Build project
      run: npm run build

    - name: Deploy to GitHub Pages
      uses: peaceiris/actions-gh-pages@v3
      with:
        github_token: ${{ secrets.GITHUB_TOKEN }}
        publish_dir: ./dist

Step 5: Ensure Your Static Files Are Managed Properly

Make sure the dist directory is included in your .gitignore file, so it's not tracked in your repository:

/dist

Step 6: Commit and Push Your Code

Add, commit, and push your code to GitHub:

git add .
git commit -m "Set up deployment to GitHub Pages"
git push origin main

Conclusion

By following these steps, you can convert your Express.js app into static files and deploy it to GitHub Pages using GitHub Actions. This approach leverages Webpack for bundling and GitHub Actions for CI/CD, providing a streamlined deployment process.

If you have any questions or run into any issues, feel free to leave a comment below. Happy coding!