Easy Astro enviroment with VS Remote-Containers

9/3/2022

I started using VS remote-containers to test different languages, and I found this is the easies way to set up a new development enviroment for Astro.build

Step 1 - Make a general folder

mkdir astrodev

cd astrodev

Once inside the astrodev folder, create a new sub-folder called .devcontainer

If you already have a Dockerfile, you can use it, else you can use the node-alpine docker for a lightweight image.

Create Dockerfile

FROM node:16-alpine 

WORKDIR /app

RUN apk update && \
    apk add git && \
    apk add openssh

ENV HOST 0.0.0.0
EXPOSE 3000

Make a new file called devcontainer.json

{
    "name":"astro",
    "build": { "dockerfile": "Dockerfile" },
	"forwardPorts": [
		3000
	],
	"customizations": {
		"vscode": {
			"extensions": [
				"astro-build.astro-vscode"
			]
		}
	}
}

Once running, VS code will install the astro extension automatically.

Now all that is needed is to open Visual Studio Code, open the astrodev folder and it will ask you if you wan to open it in remote-container

The first time it runs, it will take a while as it has to download the docker image and build it.

Once it has finished building the image, you can open a new terminal from within VS Code and make sure node is installed

node --version

Once confirmed it has installed correctly, you can reference the official Astro.buil documentation to create a new project.

yarn create astro

...

...

cd my-astro-project

yarn dev

Hope you enjoy using astro.

I’ m currently using it to make my personal site dabiddo.net