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
This commit is contained in:
doprz
GitHub
242
.dockerignore
Normal file
242
.dockerignore
Normal file
@@ -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/
|
||||
89
DOCKER_DEV_SETUP.md
Normal file
89
DOCKER_DEV_SETUP.md
Normal file
@@ -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.
|
||||
47
Dockerfile
Normal file
47
Dockerfile
Normal file
@@ -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"]
|
||||
@@ -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.
|
||||
|
||||
</details>
|
||||
|
||||
### 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:
|
||||
|
||||
46
docker-entrypoint.sh
Normal file
46
docker-entrypoint.sh
Normal file
@@ -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
|
||||
Reference in New Issue
Block a user