Devcontainer with VS Code

Use a local devcontainer

If you don’t want any local setup (apart from Docker Desktop), but still run your own Hugo instance, you can make use of the preconfigured devcontainer. If you want to learn more about the concept, visit https://code.visualstudio.com/docs/remote/containers. To use it, you need to take the following steps:

1. Start Docker Desktop and switch to Linux containers by right-clicking on the Docker logo in the system tray and selecting “Switch to Linux containers…”. If you only see “Switch to Windows containers…”, then you are already switched to Linux containers. If anything goes wrong, check if you are on the latest version of Docker Desktop and have the WSL2 integration enabled. If you have all that in place and it still doesn’t work, check the extended installation documentation here

   Consequences of switching

   When switching to Linux, you will probably see a warning that tells you that you “will not be able to manage the Windows containers until you switch back to Windows containers”. That means that the Docker Desktop management GUI can only show either the Windows containers or the Linux containers and if you switch to Linux, you consequently won’t see the Windows containers until you switch back. But the Windows containers will continue to run, you won’t loose data and you can keep using them e.g. for Business Central development, you just can’t manage them through the Docker Desktop GUI
2. Install the Remote development extension pack in Visual Studio Code
3. Run the action “Remote containers: Clone Repository in Container Volume” and select the fork you created. If you haven’t done that before, go through the docs.
4. Wait for a bit. When you do this for the first time, it can take a couple of minutes. Next time it will be faster…
5. After a while, you will have VS Code with the cloned repository and the terminal should show something like “Done. Press any key to close the terminal.”
6. Run the action “Tasks: Run task” and select “Start local Hugo Server” from the list. If you don’t see that entry, you might have to reload your VS Code window and try again
7. After Hugo has generated the site, you will get a notification that offers you to “Open a browser”. Click on that and you will see your local instance of the AL guidelines! Again, on the first try it will be a bit slow and sluggish, but the second one should be fast.
8. Now you can make changes and just save them. If you open the terminal, you will see a message that tells you that a change was detected and the site was rebuilt. After that, the change should automatically appear in your browser

Here is a walkthrough of the full process:

Use GitHub Codespaces

What is also great about this, is that you can also use GitHub Codespaces with that setup. In that case, steps 1-5 become two clicks… Here is another full walkthrough: