HOW TO SET UP A Symfony, Vue, Yarn Project USING DOCKER

1. Execute the following docker_script.sh file in your terminal using the following command:

   bash docker_script.sh

File docker_script.sh:

mkdir app
  mkdir php &&
    printf "what is the name of your project directory?" &&
    read dir_name &&
    printf "FROM php:8.0-fpm
          nRUN apt update   
            && apt install -y zlib1g-dev g++ git libicu-dev zip libzip-dev zip 
            && docker-php-ext-install intl opcache pdo pdo_mysql 
            && pecl install apcu 
            && docker-php-ext-enable apcu 
            && docker-php-ext-configure zip 
            && docker-php-ext-install zip
WORKDIR /var/www/$dir_name
RUN curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer
RUN curl -sS https://get.symfony.com/cli/installer | bash
RUN git config --global user.email "YourEmailAdres@gmail.com" 
        && git config --global user.name  "Yourname"  " >>php/Dockerfile
  mkdir nginx &&
    printf 'server {
    listen 80;
    index index.php;
    server_name localhost;
    root /var/www/%s/public;
    error_log /var/log/nginx/project_error.log;
    access_log /var/log/nginx/project_access.log;
    location / {
        try_files  $uri /index.php$is_args$args;
    }
    location ~ ^/index\.php(/|$) {
        fastcgi_pass php:9000;
        fastcgi_split_path_info ^(.+\.php)(/.*)$;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
        fastcgi_param DOCUMENT_ROOT $realpath_root;
        fastcgi_buffer_size 128k;
        fastcgi_buffers 4 256k;
        fastcgi_busy_buffers_size 256k;
        internal;
    }
    location ~ \.php$ {
        return 404;
    }
}' $dir_name >>nginx/default.conf
  printf "
version: '3.3'
services:
  database:
    container_name: database-$dir_name
    image: mysql:8.0
    restart: always
    command: --default-authentication-plugin=mysql_native_password
    environment:
      MYSQL_ROOT_PASSWORD: your_password
      MYSQL_DATABASE: %s
      MYSQL_USER: your_user
      MYSQL_PASSWORD: your_password
    ports:
      - '4306:3306'
    volumes:
      - ./mysql:/var/lib/mysql
  php:
    container_name: php-$dir_name
    build:
      context: ./php
    ports:
      - '9000:9000'
    volumes:
      - ./app:/var/www/%s
    depends_on:
      - database
  nginx:
    container_name: nginx-$dir_name
    image: nginx:stable-alpine
    ports:
      - '8080:80'
    volumes:
      - ./app:/var/www/%s
      - ./nginx/default.conf:/etc/nginx/conf.d/default.conf
    depends_on:
      - php
      - database
" $dir_name $dir_name $dir_name >>./docker-compose.yml

Notice: when you execute the docker_Script.sh , you will be asked  following question:
what is the name of your project directory?
You should give the same name of he directory project, where your project is located.
Like for me is wg-app-new as the directory of my project.

After executing the docker_script.sh file you will get the following files and directories in your Project

Now you have to build your container through the following commmand:

docker-compose up -d --build

After the container has been build you have to get the following result on terminal:

In docker you have to have the following images in your container

Now we go inside the php contianer in my case it’s called php-wg-app-new
execute the following command to go inside the container:

docker container exec -it php-wg-app-new bash

It should seem like this

Now we we are inside the container to install symfony just type the following command:

composer create-project symfony/skeleton .

the point . is the where you want to install symfony.

After installing symfony when you go to the localhost:8080 you should get the following page from symfony.

Installing Yarn using npm:

we need to install npm first because we don’t have it in the container.

apt install npm

To install Yarn run the following command:

npm install -g yarn

Now we need to install webpack-encore-bundle

composer require symfony/webpack-encore-bundle

After installing Encore you should have the following files in your directories .

You have to enable VueLoader in webpack file 

Let’s now install vue using yarn

yarn add vue

If you get this error

You can run this command to solve it

yarn global add n && n 14.15.0

When you execute yarn yarn info vue version  you should get the following result that ensure that vue has been successfuly installed .

I hope this article was helpful. I didn’t explain every thing because this article is for programmers with experience. If you have questions or feedback you can write me on info @ webeface.de.

If you’re wondering how to set up Shopware with Dockware, check out this article here.

Have fun!