For the past year or so, DDEV has been my go-to tool for setting up a development environment. With a simple .yaml file, this nifty tool is capable of providing a containerized workbench with PHP, a MariaDB/PostreSQL database, and Mailpit. It's perfect for anything from WordPress to the most complex Symfony app. However, out of the box it's not tailored to be used alongside Node. Granted, it does come bundled with Node pre-installed, but if you want to use your PHP backend with a TypeScript frontend, it requires a tiny bit of configuration. This is what this article is about. It is inspired by Andy Blum's blog post over at Lullabot. My approach is similar but a bit simpler.
My web stack of choice is Symfony as an API (either RESTful or using GraphQL) and a frontend using Vue.js. I used to rely on NVM or Volta and make use of my locally installed Node instance, but I wanted to have something completely portable - something where I could just clone a repo, run ddev start and get to work. To achieve that, we're going to set things up as follows:
For this project, we're going to use a made-up domain - let's say tinydev.ddev.site - and have the API available at api.tinydev.ddev.site and the web app at app.tinydev.ddev.site. I'm going to assume you already have Docker and DDEV installed and ready to use.
To keep things tidy, we'll use the following folder structure:
/.ddev
- config.yaml
/backend
- Symfony files...
/webapp
- Vue.js files...
The /.ddev folder will contain its configuration file (config.yaml), with the Symfony API inside /backend and our frontend inside /webapp.
Setting up the Symfony app
Let's begin by using ddev config to initialize the project, selecting symfony as the application type. The docroot for our project will be backend/public.
Once configured, open /.ddev/config.yaml and add the additional host names (api.tinydev and app.tinydev). The configuration file should look like this:
name: tinydev
type: symfony
docroot: backend/public
php_version: '8.3'
webserver_type: nginx-fpm
xdebug_enabled: false
additional_hostnames: ['api.tinydev', 'app.tinydev']
additional_fqdns: []
database:
type: mariadb
version: '10.11'
use_dns_when_possible: true
composer_version: '2'
web_environment: []
corepack_enable: false
Start DDEV with ddev start, then enter the web container using ddev ssh. We'll install Symfony in the backend directory (at this time of writing the latest version of Symfony is 7.2). We'll have to delete the backend directory first so that Composer can generate the project.
> rm -rf backend && composer create-project symfony/skeleton:"7.2.x" backend
Once installed, create a simple controller to test everything is working as it should:
My web stack of choice is Symfony as an API (either RESTful or using GraphQL) and a frontend using Vue.js. I used to rely on NVM or Volta and make use of my locally installed Node instance, but I wanted to have something completely portable - something where I could just clone a repo, run ddev start and get to work. To achieve that, we're going to set things up as follows:
- Set up the PHP container and Symfony
- Freeze the Node version and install Vue.js
- Add a reverse proxy to access the frontend
- Enhance the DX thanks to a Makefile
For this project, we're going to use a made-up domain - let's say tinydev.ddev.site - and have the API available at api.tinydev.ddev.site and the web app at app.tinydev.ddev.site. I'm going to assume you already have Docker and DDEV installed and ready to use.
To keep things tidy, we'll use the following folder structure:
/.ddev
- config.yaml
/backend
- Symfony files...
/webapp
- Vue.js files...
The /.ddev folder will contain its configuration file (config.yaml), with the Symfony API inside /backend and our frontend inside /webapp.
Setting up the Symfony app
Let's begin by using ddev config to initialize the project, selecting symfony as the application type. The docroot for our project will be backend/public.
Once configured, open /.ddev/config.yaml and add the additional host names (api.tinydev and app.tinydev). The configuration file should look like this:
name: tinydev
type: symfony
docroot: backend/public
php_version: '8.3'
webserver_type: nginx-fpm
xdebug_enabled: false
additional_hostnames: ['api.tinydev', 'app.tinydev']
additional_fqdns: []
database:
type: mariadb
version: '10.11'
use_dns_when_possible: true
composer_version: '2'
web_environment: []
corepack_enable: false
Start DDEV with ddev start, then enter the web container using ddev ssh. We'll install Symfony in the backend directory (at this time of writing the latest version of Symfony is 7.2). We'll have to delete the backend directory first so that Composer can generate the project.
> rm -rf backend && composer create-project symfony/skeleton:"7.2.x" backend
Once installed, create a simple controller to test everything is working as it should: