fix: allow app to run in a subfolder via BASE_URL

[rmtsrc]

Closes #356 #423

Some services such as GitHub pages will host the app in a subfolder such as https://<username>.github.io/<repo-name>/

Currently when trying to self host it-tools via a GitHub pages action the BASE_URL environment variable was ignored and the index.html file was requesting JavaScript and CSS from /assets/..., rather than /<subfolder>/assets/...

This PR allows the BASE_URL to be used to correctly set the full URL of the app allowing both / and /<subfolder>/

To build using a custom folder:

1. BASE_URL="/it-tools/" pnpm build
2. Rename the generated dist folder to it-tools and serve on https://your-domain.com/it-tools

To build for GitHub Pages:

1. Enable GitHub Pages build and deployment option in your fork, under Settings > Pages and select GitHub Actions as the source
2. Add the following GitHub action to your repo:

.github/workflows/deploy-pages.yaml

name: Deploy static content to Pages

on:
  # Runs on pushes targeting the default branch
  push:
    branches: ["main"]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  # Single deploy job since we're just deploying
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3

      - name: Install Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18

      - uses: pnpm/action-setup@v2
        name: Install pnpm
        id: pnpm-install
        with:
          version: 8
          run_install: true

      - name: Build
        run: |
          BASE_URL="/it-tools/" pnpm build
          cp dist/index.html dist/404.html

      - name: Setup Pages
        uses: actions/configure-pages@v3

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v1
        with:
          path: './dist'

      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v2

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
it-tools	✅ Ready (Inspect)	Visit Preview	Jun 19, 2023 4:28pm

[CorentinTh]

Hi!
Thank you for the PR and tackling those issues 🙏🏻

Just a small request:

• Please import the config from scr/config.ts and use config.app.baseUrl

[rmtsrc]

Hi! Thank you for the PR and tackling those issues 🙏🏻

Just a small request:

* Please import the `config` from `scr/config.ts` and use `config.app.baseUrl`

I tried importing ./src/config.ts into ./vite.config.ts (in 73c867e), however this seem to cause issues with some of the import.meta.env variables being empty and falling back to the default.

Because ./vite.config.ts defines import.meta.env it seems to a chicken and egg issue, where you can't import ./src/config.ts into ./vite.config.ts, until ./vite.config.ts has defined/loaded it, making ./src/config.ts unusable in ./vite.config.ts

[CorentinTh]

Yeah you're right, I did not thought of this 🤔
I added a fallback for the base url

Thank you for this PR 🙏🏻

[sonarqubecloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[kurotorakun]

Hi @CorentinTh , @rmtsrc ,

Can you confirm if the "BASE_URL" env variable can be used while deploying the docker image?
In docker hub register, the nightly version has no mention of it in the dockerfile, neither in the "latest" labelled.

[rmtsrc]

I believe that BASE_URL is a build time only variable and doesn't work at runtime.

It is possible to build your own Docker image with a custom BASE_URL. First you would have to git clone this repo then add the following to the Dockerfile:

# Add this before "RUN pnpm build"
ARG BASE_URL
ENV BASE_URL=${BASE_URL}

Then rebuild and run the container via:

docker build -t it-tools --build-arg BASE_URL="/my-folder/" .
docker run -d --name it-tools --restart unless-stopped -p 8080:80 it-tools

Then if you go to http://localhost:8080 you'll get a blank page, but opening the DevTools (& refreshing) you'll notice in the Network tab that the app is trying to fetch assets from /my-folder/...

So you would need to put another server in front of it, like Nginx Proxy Manager, Traefik, caddy etc. Then setup a reverse proxy pass using /my-folder

[kurotorakun]

Hi @rmtsrc ,

Thanks for the feedback, and the detailed instructions.

Based on @CorentinTh I got the feeling that the env variable was not expected to work on runtime.
Nevertheless, there are several tools/images than allow this configuration.

@CorentinTh , do you have any plans to implement this feature (BASE_URL on runtime) in the future?
It will be more convenient to be able to do it on runtime than build the docker image after every update.

Thanks in advance,
Marc.

[veerendra2]

Hello, Hopefully we get this feature (BASE_URL on runtime) in future.
Meanwhile I created a handy script to automates the build process.

$ cat build.sh
#!/usr/bin/env bash

TMP_DIR=$(mktemp -d -t "${1}.XXXXXXX")
LATEST_TAG=$(curl -sS  https://api.github.com/repos/CorentinTh/it-tools/releases/latest | jq -r '.tag_name')

pushd ${TMP_DIR} 1>/dev/null

echo "[*] Download ${TMP_DIR}/${LATEST_TAG}.tar.gz"
curl -sSOL "https://github.com/CorentinTh/it-tools/archive/refs/tags/${LATEST_TAG}.tar.gz"
DIR_NAME=$(tar -tf ${LATEST_TAG}.tar.gz | head -1)

echo "[*] Extract ${LATEST_TAG}.tar.gz"
tar -xf ${LATEST_TAG}.tar.gz

pushd $DIR_NAME 1>/dev/null

echo "[*] Update BASE_URL in Dockerfile"
# Update your BASE_URL below!
sed -i '/RUN pnpm build/i ENV BASE_URL="/it-tools/"' Dockerfile

echo "[*] Run docker build"
docker build -t it-tools .

echo "[*] Remove ${TMP_DIR}"
rm -rf ${TMP_DIR}

[YealKio]

great genius! #461 (comment)

[Majramos]

Don't you need to add the ENV BASE_URL="/it-tools/" to both stages of image build?

I had problems before I added the env variable to the second stage also.