From a5e921fd75109a50f17d05c9682e73ba246f3dd1 Mon Sep 17 00:00:00 2001 From: doprz <52579214+doprz@users.noreply.github.com> Date: Thu, 21 Nov 2024 22:41:52 -0600 Subject: [PATCH] feat(build): add Docker support (#322) * feat(build): add Docker support * fix: pnpm patches * chore: update readme * chore: refactor Docker section into separate markdown file * chore: remove polling and host 0.0.0.0 * feat: add .dockerignore * feat: update .dockerignore --- .dockerignore | 242 +++++++++++++++++++++++++++++++++++++++++++ DOCKER_DEV_SETUP.md | 89 ++++++++++++++++ Dockerfile | 47 +++++++++ README.md | 8 +- docker-entrypoint.sh | 46 ++++++++ 5 files changed, 431 insertions(+), 1 deletion(-) create mode 100644 .dockerignore create mode 100644 DOCKER_DEV_SETUP.md create mode 100644 Dockerfile create mode 100644 docker-entrypoint.sh diff --git a/.dockerignore b/.dockerignore new file mode 100644 index 00000000..d20769bc --- /dev/null +++ b/.dockerignore @@ -0,0 +1,242 @@ +# File created using '.gitignore Generator' for Visual Studio Code: https://bit.ly/vscode-gig +# Created by https://www.toptal.com/developers/gitignore/api/visualstudiocode,macos,node,react,storybookjs +# Edit at https://www.toptal.com/developers/gitignore?templates=visualstudiocode,macos,node,react,storybookjs + +### macOS ### +# General +.DS_Store +.AppleDouble +.LSOverride + + +# Thumbnails +._* + +# Files that might appear in the root of a volume +.DocumentRevisions-V100 +.fseventsd +.Spotlight-V100 +.TemporaryItems +.Trashes +.VolumeIcon.icns +.com.apple.timemachine.donotpresent + +# Directories potentially created on remote AFP share +.AppleDB +.AppleDesktop +Network Trash Folder +Temporary Items +.apdisk + +### macOS Patch ### +# iCloud generated files +*.icloud + +### Node ### +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +lerna-debug.log* +.pnpm-debug.log* + +# Diagnostic reports (https://nodejs.org/api/report.html) +report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json + +# Runtime data +pids +*.pid +*.seed +*.pid.lock + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage +*.lcov + +# nyc test coverage +.nyc_output + +# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# Bower dependency directory (https://bower.io/) +bower_components + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (https://nodejs.org/api/addons.html) +build + +# Dependency directories +node_modules/ +jspm_packages/ + +# Snowpack dependency directory (https://snowpack.dev/) +web_modules/ + +# TypeScript cache +*.tsbuildinfo + +# Optional npm cache directory +.npm + +# Optional eslint cache +.eslintcache + +# Optional stylelint cache +.stylelintcache + +# Microbundle cache +.rpt2_cache/ +.rts2_cache_cjs/ +.rts2_cache_es/ +.rts2_cache_umd/ + +# Optional REPL history +.node_repl_history + +# Output of 'npm pack' +*.tgz + +# Yarn Integrity file +.yarn-integrity + +# dotenv environment variable files +.env +.env.development.local +.env.test.local +.env.production.local +.env.local +.env.* +!.env.example + +# parcel-bundler cache (https://parceljs.org/) +.cache +.parcel-cache + +# Next.js build output +.next +out + +# Nuxt.js build / generate output +.nuxt +dist + +# Gatsby files +.cache/ +# Comment in the public line in if your project uses Gatsby and not Next.js +# https://nextjs.org/blog/next-9-1#public-directory-support +# public + +# vuepress build output +.vuepress/dist + +# vuepress v2.x temp and cache directory +.temp + +# Docusaurus cache and generated files +.docusaurus + +# Serverless directories +.serverless/ + +# FuseBox cache +.fusebox/ + +# DynamoDB Local files +.dynamodb/ + +# TernJS port file +.tern-port + +# Stores VSCode versions used for testing VSCode extensions +.vscode-te +node_modulesst + +# yarn v2 +.yarn/cache +.yarn/unplugged +.yarn/build-state.yml +.yarn/install-state.gz +.pnp.* + +### Node Patch ### +# Serverless Webpack directories +.webpack/ + +# Optional stylelint cache + +# SvelteKit build / generate output +.svelte-kit + +### react ### +.DS_* +**/*.backup.* +**/*.back.* + +*.sublime* + +psd +thumb +sketch + + +### VisualStudioCode ### +.vscode/* +!.vscode/settings.json +!.vscode/tasks.json +!.vscode/launch.json +!.vscode/extensions.json +!.vscode/*.code-snippets + +# Local History for Visual Studio Code +.history/ + +# Built Visual Studio Code Extensions +*.vsix + +### VisualStudioCode Patch ### +# Ignore all local history of files +.history +.ionide + +# End of https://www.toptal.com/developers/gitignore/api/visualstudiocode,macos,node,react,storybookjs + +# Custom rules (everything added below won't be overriden by 'Generate .gitignore File' if you use 'Update' option) +package-lock.json +storybook-static/ +package/ + +# Version control +.git +.gitignore +.gitattributes + +# Dependencies +.pnpm-store +!pnpm-lock.yaml + +# Testing +coverage +.nyc_output + +# OS files +.DS_Store +Thumbs.db + +# Docker +Dockerfile +.dockerignore +docker-compose* + +# Documentation +README.md +CHANGELOG.md +DOCKER_DEV_SETUP.md +docs/ diff --git a/DOCKER_DEV_SETUP.md b/DOCKER_DEV_SETUP.md new file mode 100644 index 00000000..c879b938 --- /dev/null +++ b/DOCKER_DEV_SETUP.md @@ -0,0 +1,89 @@ +# Docker Dev Setup + +## Prerequisites + +- Docker installed on your machine +- Git (to clone the repository) + +## Getting Started + +1. Clone the repository: + + ``` + git clone https://github.com/Longhorn-Developers/UT-Registration-Plus.git + cd UT-Registration-Plus + ``` + +2. Build the Docker image: + + ``` + docker build -t ut-registration-plus . + ``` + +## Using Docker for Different Modes + +The Docker setup supports three modes of operation: build, zip, and dev. You can choose the mode either by passing it as a command or by setting the `BUILD_MODE` environment variable. + +### Build Mode (Default) + +This mode builds the extension and places the output in the `dist` folder. + +``` +docker run -it --rm -v $(pwd)/dist:/extension/dist ut-registration-plus build +``` + +or + +``` +docker run -it --rm -v $(pwd)/dist:/extension/dist -e BUILD_MODE=build ut-registration-plus +``` + +### Zip Mode + +This mode builds the extension and creates a zipped package in the `package` folder. + +``` +docker run -it --rm -v $(pwd)/package:/extension/package ut-registration-plus zip +``` + +or + +``` +docker run -it --rm -v $(pwd)/package:/extension/package -e BUILD_MODE=zip ut-registration-plus +``` + +### Development Mode with Hot Module Replacement (HMR) + +This mode runs the extension in development mode with HMR support. + +_Note_: This currently doesn't work. + +``` +docker run -it --rm -v $(pwd)/dist:/extension/dist -v $(pwd)/dist:/extension/dist -p 5173:5173 ut-registration-plus dev +``` + +or + +``` +docker run -it --rm -v $(pwd)/dist:/extension/dist -p 5173:5173 -e BUILD_MODE=dev ut-registration-plus +``` + +## Accessing the Built Extension + +- For build mode, the extension files will be in the `dist` directory on your host machine. +- For zip mode, the zipped extension will be in the `package` directory on your host machine. +- For dev mode, the extension will be continuously built in the `dist` directory, and you can load it as an unpacked extension in Chrome. + +## Docker Development Workflow + +When working on the extension: + +1. Run the container in dev mode +2. Make changes to your source code +3. The extension will automatically rebuild thanks to HMR +4. Reload the extension in Chrome to see your changes + +## Troubleshooting + +- If you encounter permission issues with the output directories, ensure that the directories exist on your host machine and have the correct permissions. +- For any other issues, please check the Docker logs or open an issue in the GitHub repository. diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 00000000..82a5ae10 --- /dev/null +++ b/Dockerfile @@ -0,0 +1,47 @@ +# Stage 1: Base image with Node.js and pnpm +FROM node:20.9.0-alpine AS base + +# Install pnpm +RUN npm install -g pnpm + +# Set working directory +WORKDIR /app + +# Copy package.json, pnpm-lock.yaml, and .nvmrc +COPY package.json pnpm-lock.yaml .nvmrc ./ + +# Copy patches directory if it exists +COPY patches ./patches + +# Install dependencies, including applying patches +RUN pnpm install --frozen-lockfile + +# Copy the rest of the source code +COPY . . + +# Stage 2: Final stage +FROM base AS final + +# Install zip utility and bash +RUN apk add --no-cache zip bash + +# Set working directory +WORKDIR /extension + +# Copy all files from base +COPY --from=base /app ./ + +# Copy the entrypoint script +COPY docker-entrypoint.sh /usr/local/bin/ + +# Make the entrypoint script executable +RUN chmod +x /usr/local/bin/docker-entrypoint.sh + +# Expose port for HMR +EXPOSE 5173 + +# Set the entrypoint to our new script +ENTRYPOINT ["docker-entrypoint.sh"] + +# Set the default command (which can be overridden) +CMD ["build"] diff --git a/README.md b/README.md index f2f0e01d..cfa7590d 100644 --- a/README.md +++ b/README.md @@ -58,7 +58,9 @@ Contributions are welcome and encouraged! To get started: For significant changes, it’s recommended to open an issue first to discuss the proposed updates. -## Development: Getting Started +## Development + +### Getting Started 1. Clone this repository: `git clone https://github.com/Longhorn-Developers/UT-Registration-Plus.git` 2. **Node Version**: This project requires the Node.js version specified in `.nvmrc`. Use [nvm](https://github.com/nvm-sh/nvm) to install and manage the correct version: @@ -101,6 +103,10 @@ Use `BETA=true pnpm build` to generate a beta build. +### Docker + +This project includes a Dockerfile that allows you to build, zip, or run the extension in development mode using Docker. Refer to [Docker Dev Setup](./DOCKER_DEV_SETUP.md) to get started. + ## Loading the Extension Manually To load the extension manually in Chrome: diff --git a/docker-entrypoint.sh b/docker-entrypoint.sh new file mode 100644 index 00000000..5d937781 --- /dev/null +++ b/docker-entrypoint.sh @@ -0,0 +1,46 @@ +#!/usr/bin/env bash + +set -euo pipefail + +# Define supported modes +SUPPORTED_MODES=("build" "zip" "dev") + +# Function to display usage information +usage() { + echo "Usage: $0 [build|zip|dev]" + echo " build: Build the extension" + echo " zip: Build and zip the extension" + echo " dev: Run in development mode with HMR" + exit 1 +} + +# Check if BUILD_MODE is set, otherwise use the first argument +if [ -n "${BUILD_MODE:-}" ]; then + mode="$BUILD_MODE" +elif [ $# -eq 1 ]; then + mode="$1" +else + usage +fi + +# Validate the mode +if [[ ! " ${SUPPORTED_MODES[*]} " =~ " ${mode} " ]]; then + echo "Error: Invalid mode '${mode}'" >&2 + usage +fi + +# Execute the appropriate command based on the mode +case "$mode" in + build) + echo "Building extension..." + exec pnpm run build + ;; + zip) + echo "Building and zipping extension..." + exec pnpm run zip + ;; + dev) + echo "Running in development mode with HMR..." + exec pnpm run dev + ;; +esac