chore: update quickstart example

Author: FabianKramm

examples/quickstart/.gitignore

@@ -1,4 +1,6 @@
-
-
-# Exclude .devspace generated files
-.devspace/
+Dockerfile
+.devspace/
+chart/
+node_modules/
+test/
+devspace.yaml

examples/quickstart/Dockerfile

@@ -1,11 +1,26 @@
 FROM node:13.14-alpine
 
-RUN mkdir /app
+# Set working directory
 WORKDIR /app
 
-COPY package.json .
+# Add package.json to WORKDIR and install dependencies
+COPY package*.json ./
 RUN npm install
 
+# Add source code files to WORKDIR
 COPY . .
 
+# Application port (optional)
+EXPOSE 3000
+
+# Debugging port (optional)
+# For remote debugging, add this port to devspace.yaml: dev.ports[*].forward[*].port: 9229
+EXPOSE 9229
+
+# Container start command (DO NOT CHANGE and see note below)
 CMD ["npm", "start"]
+
+# To start using a different `npm run [name]` command (e.g. to use nodemon + debugger),
+# edit devspace.yaml:
+# 1) remove: images.app.injectRestartHelper (or set to false)
+# 2) add this: images.app.cmd: ["npm", "run", "dev"]

examples/quickstart/devspace.yaml

@@ -1,26 +1,81 @@
 version: v1beta11
+
+# `vars` specifies variables which may be used as ${VAR_NAME} in devspace.yaml
 vars:
-  - name: IMAGE
-    value: myusername/devspace
-images:
-  default:
-    image: ${IMAGE}
+- name: IMAGE
+  value: myusername/app
+
+# `deployments` tells DevSpace how to deploy this project
 deployments:
-  - name: quickstart
-    helm:
-      componentChart: true
-      values:
-        containers:
-          - image: ${IMAGE}
-        service:
-          ports:
-            - port: 3000
+- name: quickstart
+  # This deployment uses `helm` but you can also define `kubectl` deployments or kustomizations
+  helm:
+    # We are deploying the so-called Component Chart: https://devspace.sh/component-chart/docs
+    componentChart: true
+    # Under `values` we can define the values for this Helm chart used during `helm install/upgrade`
+    # You may also use `valuesFiles` to load values from files, e.g. valuesFiles: ["values.yaml"]
+    values:
+      containers:
+      - image: ${IMAGE} # Use the value of our `${IMAGE}` variable here (see vars above)
+      service:
+        ports:
+        - port: 3000
+
+# `dev` only applies when you run `devspace dev`
 dev:
+  # `dev.ports` specifies all ports that should be forwarded while `devspace dev` is running
+  # Port-forwarding lets you access your application via localhost on your local machine
   ports:
-    - imageSelector: ${IMAGE}
-      forward:
-        - port: 3000
+  - imageSelector: ${IMAGE} # Select the Pod that runs our `${IMAGE}`
+    forward:
+    - port: 3000
+
+  # `dev.open` tells DevSpace to open certain URLs as soon as they return HTTP status 200
+  # Since we configured port-forwarding, we can use a localhost address here to access our application
+  open:
+  - url: http://localhost:3000
+
+  # `dev.sync` configures a file sync between our Pods in k8s and your local project files
   sync:
-    - imageSelector: ${IMAGE}
-      uploadExcludePaths:
-        - node_modules
+  - imageSelector: ${IMAGE} # Select the Pod that runs our `${IMAGE}`
+    excludePaths:
+    - .git/
+    uploadExcludeFile: .gitignore
+
+  # `dev.terminal` tells DevSpace to open a terminal as a last step during `devspace dev`
+  terminal:
+    imageSelector: ${IMAGE} # Select the Pod that runs our `${IMAGE}`
+    # With this optional `command` we can tell DevSpace to run a script when opening the terminal
+    # This is often useful to display help info for new users or perform initial tasks (e.g. installing dependencies)
+    # DevSpace has generated an example ./devspace_start.sh file in your local project - Feel free to customize it!
+    command: ["./devspace_start.sh"]
+
+  # Since our Helm charts and manifests deployments are often optimized for production,
+  # DevSpace let's you swap out Pods dynamically to get a better dev environment
+  replacePods:
+  - imageSelector: ${IMAGE} # Select the Pod that runs our `${IMAGE}`
+    # Since the `${IMAGE}` used to start our main application pod may be distroless or not have any dev tooling, let's replace it with a dev-optimized image
+    # DevSpace provides a sample image here but you can use any image for your specific needs
+    replaceImage: loftsh/javascript:latest
+    # Besides replacing the container image, let's also apply some patches to the `spec` of our Pod
+    # We are overwriting `command` + `args` for the first container in our selected Pod, so it starts with `sleep 9999999`
+    # Using `sleep 9999999` as PID 1 (instead of the regular ENTRYPOINT), allows you to start the application manually
+    patches:
+    - op: replace
+      path: spec.containers[0].command
+      value: ["sleep"]
+    - op: replace
+      path: spec.containers[0].args
+      value: ["9999999"]
+
+# `profiles` lets you modify the config above for different environments (e.g. dev vs production)
+profiles:
+  # This profile is called `production` and you can use it for example using: devspace deploy -p production
+  # We generally recommend to use the base config without any profiles as optimized for development (e.g. image build+push is disabled)
+- name: production
+# This profile adds our image to the config so that DevSpace will build, tag and push our image before the deployment
+  merge:
+    images:
+      app:
+        image: ${IMAGE} # Use the value of our `${IMAGE}` variable here (see vars above)
+        dockerfile: ./Dockerfile

examples/quickstart/devspace_start.sh

@@ -0,0 +1,33 @@
+#!/bin/bash
+set +e  # Continue on errors
+
+export NODE_ENV=development
+if [ -f "yarn.lock" ]; then
+   echo "Installing Yarn Dependencies"
+   yarn
+else 
+   if [ -f "package.json" ]; then
+      echo "Installing NPM Dependencies"
+      npm install
+   fi
+fi
+
+COLOR_CYAN="\033[0;36m"
+COLOR_RESET="\033[0m"
+
+echo -e "${COLOR_CYAN}
+   ____              ____
+  |  _ \  _____   __/ ___| _ __   __ _  ___ ___
+  | | | |/ _ \ \ / /\___ \| '_ \ / _\` |/ __/ _ \\
+  | |_| |  __/\ V /  ___) | |_) | (_| | (_|  __/
+  |____/ \___| \_/  |____/| .__/ \__,_|\___\___|
+                          |_|
+${COLOR_RESET}
+Welcome to your development container!
+This is how you can work with it:
+- Run \`${COLOR_CYAN}npm start${COLOR_RESET}\` to start the application
+- ${COLOR_CYAN}Files will be synchronized${COLOR_RESET} between your local machine and this container
+- Some ports will be forwarded, so you can access this container on your local machine via ${COLOR_CYAN}http://localhost:3000${COLOR_RESET}
+"
+
+bash

examples/quickstart/index.js

@@ -1,10 +1,27 @@
-var express = require('express');
-var app = express();
+const express = require('express')
+const app = express()
+const port = 3000
 
-app.get('/', function (req, res) {
-  res.send('Hello World!');
-});
+app.get('/', (req, res) => {
+  res.send(`
+    <html>
+        <head>
+            <link rel="stylesheet" href="https://devspace.sh/css/quickstart.css">
+        </head>
+        <body>
+            <img src="https://devspace.sh/images/congrats.gif" />
+            <h1>You deployed this project with DevSpace!</h1>
+            <div>
+                <h2>Now it's time to code:</h2>
+                <ol>
+                    <li>Edit this text in <code>index.js</code> and save the file</li>
+                    <li>Check the logs to see how DevSpace restarts your container</li>
+                    <li>Reload browser to see the changes</li>
+                </ol>
+            </div>
+        </body>
+    </html>
+    `)
+})
 
-app.listen(3000, function () {
-  console.log('Example app listening on port 3000!');
-});
+app.listen(port, () => console.log("Example app listening on http://localhost:" + port))