How to Deploy an Express.js App on GitHub Pages Using GitHub Actions
Tags: webdev, javascript, github, githubpages
Published: 2024-06-14 11:51:56

# 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:

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

Create a file named `server.js`:

```javascript
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:

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

Create a `webpack.config.js` file:

```javascript
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:

```json
"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:

```javascript
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:

```html
<!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:

```yaml
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:

```gitignore
/dist
```

## Step 6: Commit and Push Your Code

Add, commit, and push your code to GitHub:

```bash
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!