diff --git a/README.md b/README.md index f886219..90a098c 100644 --- a/README.md +++ b/README.md @@ -16,4 +16,6 @@ Once everything is done it should open a browser window to http://localhost:3030 The examples folder contains several Docker examples. -`examples/fullstack` is a basic example containing a backend NodeJS application with a React frontend as well as a Postgres Database. The project is set up so that you can do all development in dev containers. The `node_modules` folder for the backend is isolated from your host system and only exists inside the running container. For this reason, you will need to use a devcontainer in order to be able to get things like Intellisense and typings. \ No newline at end of file +`examples/fullstack` is a basic example containing a backend NodeJS application with a React frontend as well as a Postgres Database. The project is set up so that you can do all development in dev containers. The `node_modules` folder for the backend is isolated from your host system and only exists inside the running container. For this reason, you will need to use a devcontainer in order to be able to get things like Intellisense and typings. + + diff --git a/assets/open-dev-container.m4v b/assets/open-dev-container.m4v new file mode 100644 index 0000000..898b0a0 Binary files /dev/null and b/assets/open-dev-container.m4v differ diff --git a/examples/fullstack/README.md b/examples/fullstack/README.md index 8160a32..b968de8 100644 --- a/examples/fullstack/README.md +++ b/examples/fullstack/README.md @@ -19,6 +19,11 @@ The first time you run `docker compose up` it may take a few minutes as Docker w ![](./homepage.png) +## Developing +When running the `compose` stack, the backend node_modules are isolated from your host system. This is common in dev environment setups. In this case it is advised to use a Dev container. The following video demonstrates starting a dev container by using the VSCode plugin. + + + ### Proxying and routes You will notice that the backend is listening on `http://0.0.0.0:3333/` but the frontend is making requests to `/api/`. This is designed to mimic how you would deploy something like this in production where the backend would be behind a reverse proxy. Traefik has some really nice middleware that allows us to easily tell it to route requests destined for `/api` to `/`. The bit that handles that are these labels: