fix: replace Dockerfile with devcontainer (#220)

Added instructions for creating a devcontainer configuration file and updated references to Dockerfile

packages/projects-docs/pages/learn/devboxes/synced-templates.mdx

@@ -81,7 +81,7 @@ After you've created this file and opened the synced template at least once, you
 
 ## VM behavior of synced templates
 
-For our [Devboxes](https://codesandbox.io/docs/learn/sandboxes/overview?tab=cloud), we run your sandbox in a microVM. We try to automatically detect from your repository contents whether your project is more suited for a Devbox than a browser sandbox. To force the template to load as a Devbox, you can create a `.codesandbox/Dockerfile` file in your repository. This file should contain a valid Dockerfile that we'll use to build your Devbox.
+For our [Devboxes](https://codesandbox.io/docs/learn/sandboxes/overview?tab=cloud), we run your sandbox in a microVM. We try to automatically detect from your repository contents whether your project is more suited for a Devbox than a browser sandbox. To force the template to load as a Devbox, you can create a `.devcontainer/devcontainer.json` file in your repository. This file should contain a valid [Devcontainer configuration](https://codesandbox.io/docs/learn/environment/devcontainers) that we'll use to build your Devbox.
 
 We use memory snapshotting to resume a VM quickly when someone visits it. To ensure that visitors of your sandbox will always get the latest contents of your GitHub repository, we base the memory snapshot on the latest commit of your repository or folder.
 

packages/projects-docs/pages/learn/environment/vm.mdx

@@ -49,16 +49,21 @@ The `node_modules` folder is globally ignored. You can override this behaviour b
 
 ## Environment configuration
 
-You can configure the environment of your VM with a `Dockerfile`. To do this, create a file in the `.codesandbox` folder called `Dockerfile`. After you've saved the file, you should be prompted with a notification to restart the container.
+You can configure the environment of your VM with [Devcontainers](https://codesandbox.io/docs/learn/environment/devcontainers). To do this, create `.devcontainer/devcontainer.json` file in the root of the repository. After you've saved the file, you should be prompted with a notification to restart the container.
 
 ### Configuring NodeJS version
 
-For example, to update NodeJS to v18, you can create a `.codesandbox/Dockerfile` with these contents:
+For example, to update NodeJS to v18, you can either create or update a `.devcontainer/devcontainer.json` file with these contents:
 
-```dockerfile
-FROM node:18
+```json
+{
+  "name": "My App",
+  "image": "mcr.microsoft.com/devcontainers/javascript-node:20"
+}
 ```
 
+We're using [Devcontainers](https://codesandbox.io/docs/learn/environment/devcontainers) to configure the environment. 
+
 ### Deno support
 
 If we detect a `deno.json` file in your sandbox or repository during boot, we'll automatically enable the Deno LSP (which provides autocompletions) instead of the TypeScript LSP. You can also force this by creating a file called `.codesandbox/features.json` and inserting these contents:

packages/projects-docs/pages/tutorial/getting-started-with-docker.mdx

@@ -13,9 +13,17 @@ Docker is available for Devboxes and Repositories. With Docker, you can get `roo
 
 ### 1. Create a Dockerfile
 
-To get started with Docker, you need to create a new file called `Dockerfile` inside the `.codesandbox` folder. As an example, you could put these contents in:
+To get started with Docker, you need to create a new file called `devcontainer.json` inside the `.devcontainer` folder. As an example, you could put these contents in:
 
-```docker filename=".codesandbox/Dockerfile"
+```json filename=".devcontainer/devcontainer.json"
+{
+    "build": { "dockerfile": "Dockerfile" },
+}
+```
+
+And then create a `Dockerfile` in the same `devcontainer` folder:
+
+```docker filename=".devcontainer/Dockerfile"
 FROM ubuntu
 
 # Install htop by default
@@ -38,7 +46,7 @@ Now that you've created a Dockerfile and saved it, you should see a notification
 
 You can press "Yes", and it will build the container for you. Alternatively you can also rebuild the container by opening the command palette (<kbd>CMD/Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd>), and searching for "Rebuild Container".
 
-With a Dockerfile in `.codesandbox`, the VM will also always make sure to create the container when it boots.
+With a Dockerfile in `.devcontainer`, the VM will also always make sure to create the container when it boots.
 
 ### 3. Use the container
 
@@ -49,18 +57,34 @@ Note that you also have `root` access inside the terminal, that's because we giv
 ![htop running inside the container](/docker-terminal.png)
 
 ### 4. Create Docker Compose file
-Once the environment is set up with `.codesandbox/Dockerfile`, you can run additional services that are required for the dev environment using the native docker compose integration in CodeSandbox.
+Once the environment is set up with `.devcontainer/devcontainer.json`, you can run additional services that are required for the dev environment using the native docker compose integration in CodeSandbox.
 
-Create a new file `docker-compose.yml` in the `.codesandbox` folder. For example, you can add the following contents in the file to run an nginx server.
+Create a new file `docker-compose.yml` in the `.devcontainer` folder. For example, you can add the following contents in the file to run an nginx server. Note that you need to add your development container (from `Dockerfile`) as well. 
 
-``` yaml filename=".codesandbox/docker-compose.yml"
+``` yaml filename=".devcontainer/docker-compose.yml"
 services:
+    app:
+        build:
+            context: .
+            dockerfile: Dockerfile
+        command: sleep infinity
     nginx:
         image: nginx
         ports:
             - 8080:80
 ```
 
+To use this configuration, you should change your devcontainer configuration, like so:
+
+```json filename=".devcontainer/devcontainer.json"
+{
+	"dockerComposeFile": "docker-compose.yml",
+    "service": "app",
+}
+```
+
+Note the `service` field. This tells devcontainers to start the services in `docker-compose.yml`, and then attach to the `app` service.
+
 ### 5. Run docker compose.
 Now that you've created the `docker-compose.yml` and saved it, you should see a notification pop up, asking you to restart the `docker compose` command. Whenever the `docker-compose.yml` changes, this prompt will be shown and you can restart docker compose.