harmakit/docker-symfony-vue

Environment for Symfony + Vue.js app development

docker-symfony-vue

Environment composition:

• Docker Compose
• Nginx, PHP-FPM 7.2 and Xdebug (works on macOS)
• MySQL
• Symfony 4.2
• Node, Webpack and Vue.js

Project structure

.
├── app // Symfony app directory
│   ├── assets // Folder generated by symfony/webpack-encore-bundle
│   │   └── vue
│   ├── bin
│   ├── config // Symfony app config
│   │   ├── packages
│   │   │   ├── dev
│   │   │   ├── prod
│   │   │   └── test
│   │   └── routes
│   │       └── dev
│   ├── public // This is where the index.php lies
│   │   └── build // And that is responsible for building your js to index.js
│   ├── src // Your Symfony app core stuff
│   │   ├── Controller
│   │   ├── Entity
│   │   ├── Migrations
│   │   └── Repository
│   ├── templates // Twig templates
│   ├── tests
│   ├── translations
│   └── var 
│       ├── cache
│       └── log
├── docker 
│   ├── config // Directory with nginx/php configurations. 
│   │   ├── nginx
│   │   │   ├── hosts
│   │   │   └── xdebug
│   │   └── php
│   └── php // Here lies php Dockerfile
└── logs // Docker containers' logs

Installation

1. Create a ./.env from the ./.env.dist file. Adapt it according to your symfony application

   cp .env.dist .env

2. Set up database connection

   Take care about DATABASE_URL parameter in ./app/.env

3. Build and run Docker containers

   Make sure that 80 port is not in use or change Nginx port in ./docker/config/nginx/hosts/default.conf and also in docker-compose files

   docker-compose up --build -d

   Note:
   Docker containers can be launched with docker-sync
   I highly recommend macOS users to use that way because of these performance tests
   My page loading time decreased from 8 seconds to 250 ms
   To use it you need to install docker-sync on your machine (link above)
   After you build Docker container with docker-compose build
   Use make start_dev and make stop_dev to control your containers

   If you don't need docker-sync delete docker-compose-dev.yml docker-sync.yml and Makefile from the project root

4. Install vendors

   cd ./app
   composer install
   npm install

Usage

• Run your containers

  docker-compose up -d or make start_dev

• Run webpack watch command npm run watch

  You can also find dev adn build commands in package.json file

• Go to http://localhost:80/
  Welcome to your application!

PhpStorm config

1. Use Docker container's PHP

   Go to Preferences > Languages & Frameworks > PHP
   Click on ... near the CLI Interpreter
   Add new instance from Docker
   

2. Use path mappings

   Go to Preferences > Languages & Frameworks > PHP > Servers
   Create mappings from your ./app to var/www/app
   

3. Xdebug config

   Go to Preferences > Languages & Frameworks > PHP > Debug
   

4. Database configuration

   Use 3307 for mysql connection port or change it in docker-compose files