Merge pull request #23 from nventive/chore/docker-setup

Docker setup

README.md

@@ -8,7 +8,7 @@ The goal is to standardize how we build web projects in the company.
 ## Getting Started
 
 - Install [Yarn](https://yarnpkg.com/getting-started/install)
-- Go inside the frontend directory. Run `yarn install` and `yarn dev` to start the project.
+- View [frontend Readme](/frontend/README.md) to start the project
 
 ## Packages
 

frontend/README.md

@@ -2,6 +2,17 @@
 
 Run `yarn install` and `yarn dev` in this directory to launch the react project in your browser
 
+## Windows
+
+To run on windows, use docker.
+
+1. Set VITE_DOCKER to true in .env
+2. Run `docker-compose up --build --no-recreate -d` in this directory to create the container.
+3. Run `docker exec -it vite_docker sh` to log into the container.
+4. Run `corepack enable` to use the latest version of yarn.
+5. Make sure that yarn is set to version 4.5 with `yarn -v`, and run `yarn set version stable` if it isn't.
+6. Run `yarn` and `yarn dev` to launch the react project in your browser.
+
 ## Update locale files
 
 Pull key:value from google sheets to create json file.

frontend/docker-compose.yml

@@ -0,0 +1,16 @@
+version: "3.4"
+services:
+  vite_docker:
+    image: node:20.11.1
+    container_name: vite_docker
+    env_file:
+      - .env
+    entrypoint: /bin/sh
+    ports:
+      - 8000:8000
+    working_dir: /srv/app
+    volumes:
+      - type: bind
+        source: ./
+        target: /srv/app
+    tty: true

frontend/example.env

@@ -4,3 +4,4 @@ VITE_ENV=local
 VITE_VERSION_NUMBER=v0.0.1
 VITE_API_URL=<API_URL>
 VITE_GA_TRACKING_ID=<GA_TRACKING_ID>
+VITE_DOCKER=false

frontend/vite.config.ts

@@ -1,4 +1,4 @@
-import { defineConfig, loadEnv } from "vite";
+import { defineConfig, loadEnv, ServerOptions } from "vite";
 import react from "@vitejs/plugin-react";
 import { pigment } from "@pigment-css/vite-plugin";
 import theme from "./src/themes/theme";
@@ -7,6 +7,14 @@ import path from "path";
 export default ({ mode }: { mode: string }) => {
   process.env = { ...process.env, ...loadEnv(mode, process.cwd()) };
 
+  const serverOptions: ServerOptions = {
+    port: Number(process.env.VITE_PORT),
+  };
+  if (process.env.VITE_DOCKER === "true") {
+    serverOptions.host = true;
+    serverOptions.watch = { usePolling: true };
+  }
+
   return defineConfig({
     plugins: [
       react(),
@@ -18,9 +26,7 @@ export default ({ mode }: { mode: string }) => {
     build: {
       sourcemap: process.env.VITE_GENERATE_SOURCEMAP === "true",
     },
-    server: {
-      port: Number(process.env.VITE_PORT),
-    },
+    server: serverOptions,
     define: {
       __ENV__: JSON.stringify(process.env.VITE_ENV),
       __API_URL__: JSON.stringify(process.env.VITE_API_URL),