Laradock integration with VSCode Remote Development

[lbssousa]

This is just to keep track of what's needed to have laradock workspace container properly supported in Visual Studio Code Remote Development (Containers).

Current pending issues from VSCode side (please add more, if needed):

• [Dev Container] allow passing another user to "docker-compose exec" command when connecting to a container - [Dev Container] allow passing another user to "docker-compose exec" command when connecting to a container microsoft/vscode-remote-release#538
• Open folder in container starts all compose services - Open folder in container starts all compose services microsoft/vscode-remote-release#211

Once theses issues are addressed, it would be interesting if laradock provides an example devcontainer.json configuration to make VSCode attach to laradock workspace container.

[boumanb]

I have a working devcontainer.json.

// For format details, see https://aka.ms/vscode-remote/devcontainer.json or the definition README at
// https://github.com/microsoft/vscode-dev-containers/tree/master/containers/docker-existing-docker-compose
{
	// See https://aka.ms/vscode-remote/devcontainer.json for format details.
	"name": "Existing Docker Compose (Extend)",

	// Update the 'dockerComposeFile' list if you have more compose files or use different names.
	// The .devcontainer/docker-compose.yml file contains any overrides you need/want to make.
	"dockerComposeFile": [
		"../../laradock/docker-compose.yml"
	],

	// The 'service' property is the name of the service for the container that VS Code should
	// use. Update this value and .devcontainer/docker-compose.yml to the real service name.
	"service": "workspace",

	// The optional 'workspaceFolder' property is the path VS Code should open by default when
	// connected. This is typically a file mount in .devcontainer/docker-compose.yml
	"workspaceFolder": "/var/www/first-project",

	// Uncomment the next line if you want to keep your containers running after VS Code shuts down.
	// "shutdownAction": "none",

	// Uncomment the next line if you want to add in default container specific settings.json values
	// "settings":  { "workbench.colorTheme": "Quiet Light" },

	// Uncomment the next line to run commands after the container is created - for example installing git.
	// "postCreateCommand": "apt-get update && apt-get install -y git",

	// Add the IDs of any extensions you want installed in the array below.
	"extensions": [
		"onecentlin.laravel-blade",
		"felixfbecker.php-intellisense",
		"amiralizadeh9480.laravel-extra-intellisense",
		"fterrag.vscode-php-cs-fixer"
	]
}

Be sure to make the following path point to your Laradock docker-compose.yml.

"dockerComposeFile": [
		"../../laradock/docker-compose.yml"
	],

Also make sure that the following path is pointing to the folder of the project you want to work on this is the path inside of the workspace container

"workspaceFolder": "/var/www/first-project",

You're also free to add and remove extensions from:

"extensions": [
		"onecentlin.laravel-blade",
		"felixfbecker.php-intellisense",
		"amiralizadeh9480.laravel-extra-intellisense",
		"fterrag.vscode-php-cs-fixer"
	]

note: this devcontainer.json is meant for remote development when Laradock is already up and running. I think there are multiple ways to approach this. This is the one that I've been using for the last couple of weeks.

[ludo237]

Thanks @boumanb your snippet works like a charm. Cheers.

[MannikJ]

@boumanb Thank your very much. I have also been using this configuration for a few weeks now and it really brings development to a new level!

One thing I would like to achieve to improve my workflow even more, is to automatically start the dev containers, if they are not running already.
I tried to add the services to runServices and think this should do the trick, but unfortunately does not work.

I think my configuration should actually work, but the problem is that the command you see in the picture fails. It fails, because somehow the env variables are not present when this command is run from a different location than the laradock directory itself. So how can I provide the .env file to the devcontainer?
I just realized the extension is even supposed to also try to run all docker-compose services if no services are specified in runServices variable out of the box. But as you see it does not come to that point to spin of the containers, because it fails before.

I know this is probably not the best place to ask, because it is rather a configuration of the vscode remote containers extension, but maybe you know how to solve this issue.

Edit: I got from the extension's docs that I can append run arguments, but this does not help, because for the above command these are not applied. It bascially what is discsussed here. So docker-compose uses the env. file from the executing context instead of the location where the compose file lives. It looks it has not been solved and the solution would be to copy the env file to the projects folders, which is definitely not what I want.

[lbssousa]

@MannikJ , have you tried the sample configuration now shipped with laradock? https://github.com/laradock/laradock/blob/master/.devcontainer/devcontainer.example.json

Just go to folder laradock/.devcontainer, copy devcontainer.example.json as devcontainer.json, make your own adjustments, open laradock folder in VSCode (with Remote-Containers extension already installed), and click on the button Repoen in container.

[MannikJ]

Hey, as I tried to explain, I have a working configuration. At least when the containers are running before I connect via remote container extension.
But it is not able to spin of the containers itself, because the laradock .env file does not reside in the project directory. I guess it tries to run docker-compose with the laravel .env file, because that's what the command sees.
I use the multi project setup which can be important to know.
This is my devcontainer.json

{
	"name": "Laradock",
	"dockerComposeFile": [
		"../../laradock/docker-compose.yml"
	],
	"runArgs": ["--env-file", "../../laradock/.env"],
	"service": "workspace",
	"workspaceFolder": "/var/www/projectA",
	"extensions": [
		"dotjoshjohnson.xml",
		"ryu1kn.partial-diff",
		"artdiniz.quitcontrol-vscode",
		"emallin.phpunit",
		"eamodio.gitlens",
		"octref.vetur",
		"eg2.vscode-npm-script",
		"sasa.vscode-sass-format",
		"onecentlin.laravel-extension-pack",
		"bmewburn.vscode-intelephense-client",
		"amiralizadeh9480.laravel-extra-intellisense",
		"fterrag.vscode-php-cs-fixer"
	],
	"remoteUser": "laradock",
	"shutdownAction": "none",
	"runServices": ["mysql", "redis", "nginx"],
}

From the default configuration it looks like the docker-composer file is located in the project directory (one level up from devcontainer.json) which I don't quite understand.

[lbssousa]

@MannikJ , the trick here, assuming you have a laradock folder in your project root (example: /home/me/my-project/laradock), is opnening /home/me/my-project/laradock subfolder directly on VSCode, rather than /home/me/my-project. Note that your devcontainer.json file should go to /home/me/my-project/laradock/.devcontainer folder.

[MannikJ]

Ok, I understand that. But the point is still my scenario is different. My laradock folder is not in the project directory but one level up like the laradock docs propose for a multi project setup.
But actually I feel this isn't the best setup anyway. As I am thinking about a way to provide the whole laradock environment for each project with its .env files etc. I had something like that a while ago, but it got very tedious because it wasn't done properly. But this is another very complicated topic. For now I just would like to have a way to tell the remote extension to use the environment file from another directory (the laradock directory that is located one level up from the project directory).

[boumanb]

Hi @MannikJ,

No problem. I found your request interesting and played with it all day, never ran into this since my containers are always up. To my surprise, it's very confusing.

My setup (tried to replicate yours based on your comments, please say so if I'm wrong):

What I've found out:

1. "runArgs" is not available for Docker Compose according to VS Code documentation (it isn't listed underneath Docker Compose and/or General).
2. VS Code takes the .env file from the project / workspace root by default*. I even managed to get the whole thing working this way 😄 .
3. For as far as I could discover, it is not possible to override the path VS code takes the .env file from right now. Not by settings in VS Code and not by settings in the .devcontainer.json.

So besides from placing the Laradock .env file into our project root, it isn't possible to provide a different .env file location (at this moment). 4 possible ways around of which 2 are working and tested by me (number 2 and 3). They're ordered to my preferences:

1. I'm not aware of what OS you're using, but if you're on Linux, you may succeed by symlinking the .env file like so: For project A ln -s /home/user/development/laradock/.env /home/user/development/projecta/.env and for project B ln -s /home/user/development/laradock/.env /home/user/development/projectb/.env this way you have a central .env file that is identical for each and every project. If you would like to differ from it for whatever reason, just copy it instead of making a symlink. This solution is, in my eyes, the best.
2. Copy your .env file from laradock/.env to projecta/.env and open the projecta folder in VS Code.
3. Copy your .env file from laradock/.env to laradock/../. Create a .devcontainer folder in laradock/../ and create a devcontainer.json file identic identical to the one you're using right now but let the dockerComposeFile reference "../laradock/docker-compose.yml". Lastly, set workspaceFolder to /var/www. Now open laradock/../ in VS Code and reopen in container. Result should look like the following:
   
4. Leverage something like the initializeCommand inside of the devcontainer.json file to set all the variables in the environment (?) 🤷‍♂️

*The default .env file is picked up from the root of the project, but you can use env_file in your Docker Compose file to specify an alternate location.
copied from: VS Code documentation underneath Docker Compose