Skip to content
Madalin Ignisca edited this page Jan 29, 2024 · 7 revisions

Devcontainers or local Codespaces with optimizations for PHP and Nodejs development.

Develop Laravel, Symfony, NestJS, SailsJS, WordPress, Drupal, Magento, Prestashop, Opencart project with any NodeJS, Python and PHP version.

Getting started:

Using the generator (WSL, Linux and MacOS):

This is in process to be refactored

Download or copy generator.sh to a directory in your PATH and make it executable. Rename it how you want. In the folder with your projects, run the generator. It will create a new directory with minimum needed. You can version it and share with your team. It will soon support a self-update option.

Manual mode

Copy the .devcontainer.json and docker-compose.yaml either to your project root, or a dedicated directory. Customize as you need.

You need to have Docker installed and working on your computer, remote can also be used, this setup does not use local volume binds.

A note on remote docker: Windows and MacOS Docker, probably not wanted by who want to run Visual Studio Code on a light computer and connect to a monster server, so you should look to install docker-cli using Chocolatey on Windows and Brew on MacOS. Make sure docker-compose or Compose v2 is installed!

One time: Generate your ssh key, but follow next for ssh-agent.

Follow the ssh integration help Using ssh keys. VSCode will automatically use ssh keys if were previously generated locally and are available. (this is nice, as VSCode automates usage of your git and ssh stuff and you do not have to do it on each new project)

Optional: Setup git in your host machine and set all global configuration (Like your name, email, gpg etc.). Visual Studio Code will synchronize them with any project you will work using this.

Open it in Visual Studio Code.

One time: Install the remote containers extension if you do not have it yet.

Optional: Install Git and make Identity config.

Enjoy :)

Add another related project/folder to the workspace: in /projects create a folder for the additional project and add this folder to the workspace in Visual Studio Code like you do for local. I use this setup to have the frontend main client in the main /projects/workspace folder and /projects/api for the api as an example. VSCode allows quickly to reopen this workspaces from the File menu.

PS. Turn off services that might use 8000, 8080, 3000, 3306 or other ports on your local. This are needed for Docker to map ports in the containers. Or better disable/change them in docker-compose.yml (left value is host to change, right is inside container - do not change the right one if unsure what you do), VSCode will ask you to open a new random port when you start a development server.

Examples

(after you have started it) Start Visual Studio Code's terminal.

Start a new Laravel project: composer create-project laravel/laravel . This will generate a new project in the workspace.

Edit .env to access the database at host mariadb, user and password developer or whatever database you have set in docker compose file.

When you serve, pass --host=0.0.0.0. App will be accessible at http://127.0.0.1:8000 in your browser. Tip: For Laravel, add this gist to /app/console/commands/ServeCommand.php and just run artisan serve.

Clone the project in the workspace git clone [git-repo] ..

Use git, edit as expected, use debug for php, nodejs etc. Workspace settings for debugging should be saved in the project (I usually save them to the project's git repo, as all team members use identical setup and there is no need for different settings).

Clone this wiki locally