├── .gitignore ├── CHANGELOG.md ├── LICENSE.md ├── Makefile ├── README.md ├── app ├── favicon.svg ├── index.html ├── package.json ├── src │ ├── main.ts │ ├── style.css │ └── vite-env.d.ts ├── tsconfig.json └── vite.config.js ├── docker-config ├── .dockerignore ├── Dockerfile └── docker.sh └── resources └── img ├── vitejs-docker-dev-app.png ├── vitejs-docker-dev-browser.png └── vitejs-docker-dev-vite.png /.gitignore: -------------------------------------------------------------------------------- 1 | # VITEJS 2 | vite 3 | 4 | # BUILD FILES 5 | node_modules/ 6 | yarn-error.log 7 | npm-debug.log 8 | .pnpm-store 9 | pnpm-lock.yaml 10 | 11 | # APP FILES 12 | app/dist/ 13 | 14 | # MISC FILES 15 | .cache 16 | .DS_Store 17 | .idea 18 | .project 19 | .settings 20 | *.esproj 21 | *.sublime-workspace 22 | *.sublime-project 23 | *.tmproj 24 | *.tmproject 25 | .vscode/* 26 | !.vscode/settings.json 27 | !.vscode/tasks.json 28 | !.vscode/launch.json 29 | !.vscode/extensions.json 30 | config.codekit3 31 | prepros-6.config 32 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Vite.js Docker Dev 2 | 3 | All notable changes to this project will be documented in this file. 4 | 5 | ## 1.0.4 - 2022.01.15 6 | ### Fixed 7 | * Remove `tsc` from the `build` script for the example app to so it can build successfully out of the box ([#2](https://github.com/nystudio107/vitejs-docker-dev/issues/2)) 8 | 9 | ## 1.0.3 - 2021.12.27 10 | ### Fixed 11 | * Include packages needed in the `Dockerfile` to build `bcrypt` from source for `arm64` (Apple Silicon M1) as [prebuilts don't exist](https://github.com/kelektiv/node.bcrypt.js/issues/868) 12 | 13 | ## 1.0.2 - 2021.12.20 14 | ### Fixed 15 | * Use `${CURDIR}` instead of `pwd` to be cross-platform compatible with Windows WSL2 16 | 17 | ## 1.0.1 - 2021.12.19 18 | ### Added 19 | * Added screenshots to the `README.md` 20 | * Switch to Node 16 via `16-alpine` Docker tag by default 21 | 22 | ## 1.0.0 - 2021.11.01 23 | ### Added 24 | * Initial release 25 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 nystudio107 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /Makefile: -------------------------------------------------------------------------------- 1 | TAG?=16-alpine 2 | PORT?=3000 3 | APP_DIR?=app 4 | VITE_DIR?=vite 5 | VITE_REPO?=https://github.com/vitejs/vite.git 6 | 7 | .PHONY: clean docker app-pnpm vite-pnpm app-sh vite-sh 8 | 9 | clean: 10 | rm -rf .pnpm-store 11 | rm -rf ${APP_DIR}/node_modules 12 | rm -rf ${VITE_DIR} 13 | rm -f ${APP_DIR}/pnpm-lock.yaml 14 | docker: 15 | docker build \ 16 | docker-config/ \ 17 | -t nystudio107/vitejs-dev:${TAG} \ 18 | --build-arg TAG=${TAG} \ 19 | --no-cache 20 | docker container run \ 21 | --name vitejs-build-dev \ 22 | --rm \ 23 | -t \ 24 | -v "${CURDIR}":/app \ 25 | -e VITE_REPO=${VITE_REPO} \ 26 | -e VITE_DIR=${VITE_DIR} \ 27 | -e APP_DIR=${APP_DIR} \ 28 | nystudio107/vitejs-dev:${TAG} \ 29 | docker-config/docker.sh 30 | app-pnpm: 31 | docker container run \ 32 | --name vitejs-app-dev \ 33 | --rm \ 34 | -t \ 35 | -p ${PORT}:${PORT} \ 36 | -v "${CURDIR}":/app \ 37 | nystudio107/vitejs-dev:${TAG} \ 38 | -c "cd /app/${APP_DIR} && pnpm link /app/${VITE_DIR}/packages/vite && pnpm $(filter-out $@,$(MAKECMDGOALS))" 39 | app-sh: 40 | docker exec -it vitejs-app-dev /bin/sh 41 | vite-pnpm: 42 | docker container run \ 43 | --name vitejs-vite-dev \ 44 | --rm \ 45 | -t \ 46 | -v "${CURDIR}":/app \ 47 | nystudio107/vitejs-dev:${TAG} \ 48 | -c "cd /app/${VITE_DIR}/packages/vite && pnpm $(filter-out $@,$(MAKECMDGOALS))" 49 | vite-sh: 50 | docker exec -it vitejs-vite-dev /bin/sh 51 | %: 52 | @: 53 | # ref: https://stackoverflow.com/questions/6273608/how-to-pass-argument-to-makefile-from-command-line 54 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vite.js Docker Dev 2 | 3 | Local development environment for developing vite.js via Docker container 4 | 5 | ## About 6 | 7 | This is a local development environment for developing [vite.js](https://vitejs.dev) via a Docker container. 8 | 9 | It takes care of the setup listed in the [Vite Contributing Guide](https://github.com/vitejs/vite/blob/main/CONTRIBUTING.md) in a Dockerized environment, which allows you to get it up and running quickly & easily. 10 | 11 | The only requirement is that you have [Docker](https://www.docker.com/products/docker-desktop) installed (you do not need `node`, `npm`, `pnpm`, or anything else installed locally). 12 | 13 | ## Why Docker? 14 | 15 | Developers who have adopted [Docker](https://www.docker.com/) for a containerized approach to development are used to not having to install a matching development infrastructure each time they approach a project. 16 | 17 | This allows you to "shrink-wrap" the devops needed to run a project in a container, which will run anywhere, on any machine, without having to do any meticulous setup. 18 | 19 | It also allows you to easily swap between basic things like node versions, without affecting your local computer. You can even run Vite in one version of Node, and your app in another. 20 | 21 | ## Quick Start 22 | 23 | 1. Clone down _or_ download the `vitejs-docker-dev` repository: 24 | 25 | Clone: `git clone https://github.com/nystudio107/vitejs-docker-dev.git` 26 | 27 | Download: [vitejs-docker-dev](https://github.com/nystudio107/vitejs-docker-dev/archive/refs/heads/develop.zip) 28 | 29 | 2. Go into the `vitejs-docker-dev` directory: 30 | 31 | ``` 32 | cd vitejs-docker-dev 33 | ``` 34 | 35 | 3. Build the Docker image: 36 | ``` 37 | make docker 38 | ``` 39 | This will be somewhat lengthy, as it builds the Docker image, and then clones down the [vitejs](https://github.com/vitejs/vite/) repository, and installs all of its dependencies 40 | 41 | 4. Start Vite in development mode (located in the `vite/` dir): 42 | ``` 43 | make vite-pnpm run dev 44 | ``` 45 | 46 | ...and ensure you **wait** until you see the following output: 47 | 48 | ![Screenshot](./resources/img/vitejs-docker-dev-vite.png) 49 | 50 | 5. Then in a new terminal, start the Vite app that you use for developing/testing (located in the `app/` dir): 51 | 52 | ``` 53 | make app-pnpm run dev 54 | ``` 55 | 56 | ...and ensure you **wait** until you see the following output: 57 | 58 | ![Screenshot](./resources/img/vitejs-docker-dev-app.png) 59 | 60 | Then just navigate to `http://localhost:3000` in your browser, and the Vite app in `app/` will be running, using Vite running out of the `vite/` dir. 61 | 62 | ![Screenshot](./resources/img/vitejs-docker-dev-browser.png) 63 | 64 | You can freely make changes to either the Vite.js codebase, or your app's codebase, and they will both be rebuilt when anything changes. 65 | 66 | ## Using Vite.js Docker Dev 67 | 68 | Vite.js Docker Dev uses the venerable `make` command to automate setup and access to the Docker containers used. See the [Using Make & Makefiles to Automate your Frontend Workflow](https://nystudio107.com/blog/using-make-makefiles-to-automate-your-frontend-workflow) article for more on `make`. 69 | 70 | The make tool is available for just about every platform you can imagine, and is installed with the [XCode CLI Tools](https://www.embarcadero.com/starthere/xe5/mobdevsetup/ios/en/installing_the_commandline_tools.html) on the Mac, and [WSL2](https://docs.microsoft.com/en-us/windows/wsl/install-win10) on Windows. Probably you have these installed already if you’re doing development. 71 | 72 | From a high level point of view, you: 73 | 74 | * Build the Docker image with `make docker` (typically just once) 75 | 76 | Then, when you're ready to do Vite.js development, you: 77 | 78 | * In a terminal, run Vite.js in development mode with `make vite-pnpm run dev` then wait for it to fully start up 79 | * In a new terminal, run your app that uses Vite.js in development mode with `make app-pnpm run dev` 80 | 81 | Then you can freely make changes to either the Vite.js codebase, or your app's codebase, and they will both be rebuilt when anything changes. 82 | 83 | Below are details and options available in each of the provided `make` commands: 84 | 85 | ### `make docker` 86 | 87 | The `make docker` command builds the Docker image, and then spins up a temporary `vitejs-build-dev` Docker container that: 88 | 89 | 1. Clones down the `vitejs/vite` repository for GitHub 90 | 2. Installs the Vite.js dependencies via `pnpm` in `vite/packages/vite/` 91 | 3. Installs the App dependencies via `pnpm` in `app/` 92 | 93 | This is a lengthy operation that you typically only have to do once, because from then on the built image will be used. 94 | 95 | You can think of the Docker image as a recipe, with all of ingredients and tools you need wrapped up inside it. 96 | 97 | The Docker image will be named `nystudio107/vitejs-dev` and be tagged with the default `16-alpine` tag. 98 | 99 | #### CLI Arguments 100 | 101 | You can pass in optional CLI arguments to override the default settings that `make docker` uses: 102 | 103 | * `TAG=` (default: `16-alpine`) - allows you to specify the official [node Docker image](https://hub.docker.com/_/node) tag that should be used. Using this, you can change the version of Node the container runs, e.g.: `make docker TAG="16-alpine"` will use the latest version of Node 16 104 | * `VITE_REPO=` (default: `https://github.com/vitejs/vite.git`) - allows you to specify the Vite.js repository that should be cloned down, e.g.: `make docker VITE_REPO="https://github.com/my-vendor/my-vite-fork.git"` 105 | * `VITE_DIR=` (default: `vite`) - allows you to specify the local name of the Vite.js repository directory, e.g.: `make docker VITE_DIR="my-vite-fork"` 106 | 107 | Most of the time, you'll probably be using something like: 108 | ``` 109 | make docker VITE_REPO="https://github.com/my-vendor/my-vite-fork.git" 110 | ``` 111 | ...to pull down your forked version of the `vitejs/vite` repository. But you might also want to use specific Node versions as well: 112 | ``` 113 | make docker TAG="16-alpine" VITE_REPO="https://github.com/my-vendor/my-vite-fork.git" 114 | ``` 115 | You can have as many differently tagged images created as you like, and you can specific which ones to use in subsequent `make` commands after they are built. 116 | 117 | You also may edit these defaults in the `Makefile` if you don't wish to pass the arguments in via the CLI. 118 | 119 | ### `make vite-pnpm ` 120 | 121 | The `make vite-pnpm` runs a long-running `vitejs-vite-dev` Docker container based off of the `nystudio107/vitejs-dev` Docker image. 122 | 123 | This executes `pnpm` with the passed in `` in the `vite/packages/vite/` directory. 124 | 125 | Think of the `make vite-pnpm` prefix as a router that ensures the `pnpm` command runs in the right Docker container, in the right directory. 126 | 127 | For example: 128 | 129 | ``` 130 | make vite-pnpm run dev 131 | ``` 132 | ...translates to `pnpm run dev` inside of the `vitejs-vite-dev` Docker container, run in the `vite/packages/vite/` directory. 133 | 134 | You then issue any `pnpm` commands you like using this, which will all be run in the proper context, e.g.: 135 | ``` 136 | make vite-pnpm install 137 | ``` 138 | ...translates to `pnpm install` inside of the `vitejs-vite-dev` Docker container, run in the `vite/packages/vite/` directory. 139 | 140 | #### CLI Arguments 141 | 142 | You can pass in optional CLI arguments to override the default settings that `make vite-pnpm` uses: 143 | 144 | * `TAG=` (default: `16-alpine`) - allows you to specify the tag for the `nystudio107/vitejs-dev` Docker image that should be used. e.g.: `make vite-pnpm TAG="16-alpine"` will use the Node 16 Docker image created with `make docker TAG="16-alpine"` 145 | * `VITE_DIR=` (default: `vite`) - allows you to specify the local name of the Vite.js repository directory, e.g.: `make vite-pnpm VITE_DIR="my-vite-fork"` 146 | 147 | #### Terminating 148 | 149 | To terminate the `vitejs-app-dev` Docker container, type Control-C in the terminal. 150 | 151 | ### `make app-pnpm ` 152 | 153 | Ensure that the development version of Vite is already running via `make vite-pnpm run dev` **before** using this command. 154 | 155 | The `make app-pnpm` runs a long-running `vitejs-vite-dev` Docker container based off of the `nystudio107/vitejs-dev` Docker image. 156 | 157 | This executes `pnpm` with the passed in `` in the `app/` directory. 158 | 159 | Think of the `make app-pnpm` prefix as a router that ensures the `pnpm` command runs in the right Docker container, in the right directory. 160 | 161 | For example: 162 | 163 | ``` 164 | make app-pnpm run dev 165 | ``` 166 | ...translates to `pnpm run dev` inside of the `vitejs-vite-dev` Docker container, run in the `app/` directory. 167 | 168 | You then issue any `pnpm` commands you like using this, which will all be run in the proper context, e.g.: 169 | ``` 170 | make app-pnpm install 171 | ``` 172 | ...translates to `pnpm install` inside of the `vitejs-app-dev` Docker container, run in the `app/` directory. 173 | 174 | #### CLI Arguments 175 | 176 | You can pass in optional CLI arguments to override the default settings that `make app-pnpm` uses: 177 | 178 | * `TAG=` (default: `16-alpine`) - allows you to specify the tag for the `nystudio107/vitejs-dev` Docker image that should be used. e.g.: `make app-pnpm TAG="16-alpine"` will use the Node 16 Docker image created with `make docker TAG="16-alpine"` 179 | * `APP_DIR=` (default: `app`) - allows you to specify the local name of the App repository directory, e.g.: `make app-pnpm APP_DIR="my-app"` 180 | * `PORT=` (default: `3000`) - allows you to specify the port that should be exposed on the host for Vite.js's HMR, e.g.: `make app-pnpm PORT="3001"` 181 | 182 | #### Terminating 183 | 184 | To terminate the `vitejs-app-dev` Docker container, type Control-C in the terminal. 185 | 186 | ### `make vite-sh` 187 | 188 | Should you wish to get a shell "inside" of the `vitejs-vite-dev` Docker container, you can do: 189 | ``` 190 | make vite-sh 191 | ``` 192 | This will open up an interactive shell using `sh` that allows you to run arbitrary shell commands inside of the container 193 | 194 | ### `make app-sh` 195 | 196 | Should you wish to get a shell "inside" of the `vitejs-app-dev` Docker container, you can do: 197 | ``` 198 | make app-sh 199 | ``` 200 | This will open up an interactive shell using `sh` that allows you to run arbitrary shell commands inside of the container 201 | 202 | ### `make clean` 203 | 204 | This will clean the Vite.js Docker Dev environment entirely, allowing you to start from scratch. 205 | 206 | Specifically, it will delete the following files & directories: 207 | ``` 208 | .pnpm-store 209 | app/node_modules/ 210 | vite/ 211 | app/pnpm-lock.yaml 212 | ``` 213 | 214 | ## Roadmap 215 | 216 | * Create a `make` API for running commands from the root `vite/` directory, to allow you to run tests, etc. (right now you can do this with `make vite-sh`) 217 | * Create a `plugins` directory, with an example plugin that is linked to the Vite.js app as a local repository via `file:` 218 | -------------------------------------------------------------------------------- /app/favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite App 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vitejs-docker-dev", 3 | "description": "Local development environment for developing vite.js via Docker container", 4 | "version": "1.0.0", 5 | "keywords": ["vite", "vitejs", "local", "development", "development-environment","docker", "docker-container"], 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "serve": "vite preview" 10 | }, 11 | "devDependencies": { 12 | "typescript": "^4.3.2" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /app/src/main.ts: -------------------------------------------------------------------------------- 1 | import './style.css' 2 | 3 | const app = document.querySelector('#app')! 4 | 5 | app.innerHTML = ` 6 |

Hello Vite!

7 | Documentation 8 | ` 9 | -------------------------------------------------------------------------------- /app/src/style.css: -------------------------------------------------------------------------------- 1 | #app { 2 | font-family: Avenir, Helvetica, Arial, sans-serif; 3 | -webkit-font-smoothing: antialiased; 4 | -moz-osx-font-smoothing: grayscale; 5 | text-align: center; 6 | color: #2c3e50; 7 | margin-top: 60px; 8 | } 9 | -------------------------------------------------------------------------------- /app/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /app/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "module": "ESNext", 6 | "lib": ["ESNext", "DOM"], 7 | "moduleResolution": "Node", 8 | "strict": true, 9 | "sourceMap": true, 10 | "resolveJsonModule": true, 11 | "esModuleInterop": true, 12 | "noEmit": true, 13 | "noUnusedLocals": true, 14 | "noUnusedParameters": true, 15 | "noImplicitReturns": true 16 | }, 17 | "include": ["./src"] 18 | } 19 | -------------------------------------------------------------------------------- /app/vite.config.js: -------------------------------------------------------------------------------- 1 | // https://vitejs.dev/config/ 2 | export default ({ command }) => ({ 3 | build: { 4 | emptyOutDir: true, 5 | }, 6 | plugins: [ 7 | ], 8 | server: { 9 | host: '0.0.0.0', 10 | } 11 | }); 12 | -------------------------------------------------------------------------------- /docker-config/.dockerignore: -------------------------------------------------------------------------------- 1 | # Git repository meta information 2 | **/.git 3 | -------------------------------------------------------------------------------- /docker-config/Dockerfile: -------------------------------------------------------------------------------- 1 | ARG TAG=16-alpine 2 | ARG VITE_REPO=https://github.com/vitejs/vite.git 3 | ARG VITE_DIR=vite 4 | 5 | FROM node:$TAG 6 | 7 | ENV VITE_REPO=$VITE_REPO 8 | ENV VITE_DIR=$VITE_DIR 9 | 10 | WORKDIR /app 11 | 12 | # Install packages 13 | RUN set -eux; \ 14 | # Packages to install 15 | apk add --no-cache \ 16 | git \ 17 | python3 \ 18 | make \ 19 | g++ \ 20 | && \ 21 | # Clean out directories that don't need to be part of the image 22 | rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/* \ 23 | && \ 24 | npm install -g pnpm 25 | 26 | CMD ["pnpm run dev"] 27 | 28 | ENTRYPOINT ["/bin/sh"] 29 | -------------------------------------------------------------------------------- /docker-config/docker.sh: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | if [ ! -d "$VITE_DIR" ]; then 3 | git clone $VITE_REPO 4 | fi 5 | cd /app/$VITE_DIR/packages/vite 6 | pnpm install 7 | cd /app/$APP_DIR 8 | pnpm install 9 | -------------------------------------------------------------------------------- /resources/img/vitejs-docker-dev-app.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nystudio107/vitejs-docker-dev/00480f2ab5a672c21bbffffe7d056912c1926d4c/resources/img/vitejs-docker-dev-app.png -------------------------------------------------------------------------------- /resources/img/vitejs-docker-dev-browser.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nystudio107/vitejs-docker-dev/00480f2ab5a672c21bbffffe7d056912c1926d4c/resources/img/vitejs-docker-dev-browser.png -------------------------------------------------------------------------------- /resources/img/vitejs-docker-dev-vite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nystudio107/vitejs-docker-dev/00480f2ab5a672c21bbffffe7d056912c1926d4c/resources/img/vitejs-docker-dev-vite.png --------------------------------------------------------------------------------