DEV Community

Sh Raj
Sh Raj

Posted on

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

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
Enter fullscreen mode Exit fullscreen mode

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}`);
});
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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'],
          },
        },
      },
    ],
  },
};
Enter fullscreen mode Exit fullscreen mode

In your package.json, add a build script:

"scripts": {
  "build": "webpack --mode production"
}
Enter fullscreen mode Exit fullscreen mode

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'));
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (1)

Collapse
 
webjose profile image
José Pablo Ramírez Vargas

To be clear, GitHub Pages cannot run Express. The express part is completely ignored by the action that pushes to GitHub pages. Furthermore, by reading the example, this must be copied from an old source. For example, it installs Node v16 when the latest is v20, the checkout action is already v4; same for actions-gh-pages. If authors are taking the easy path of copying and pasting articles from other places, they should at least curate the content.