veeqtoh/laravel-react-docker-workspace

This repository provides a streamlined Docker Compose workflow for supercharging your local Laravel and React development. Containerize your projects for efficient development, testing, and deployment. Experience smoother workflows and unleash the power of Docker today!

Laravel, React, Remote MySQL & Docker: Simplified Development Workflow

Supercharge your local Laravel development with this streamlined Docker Compose workflow. Containerize your Laravel and React projects for efficient development, testing, and deployment. This project was inspired by the work here. Experience smoother workflows and unleash the power of Docker today!

Usage

To get started, make sure you have Docker installed on your system, and then clone this repository.

Next, navigate in your terminal to the directory you cloned this, and spin up the containers for the web server by running docker-compose up -d --build app. After that completes, follow the steps from the src/backend/README.md file to get your Laravel project added in (or create a new blank one).

Then, follow the steps from the src/frontend/README.md file to get your React project added in (or create a new blank one).

Note: If you choose to use a locally hosted MySQL database, host name should be mysql, not localhost. The username and database should both be homestead with a password of secret.

Bringing up the Docker Compose network with app instead of just using up, ensures that only our site's containers are brought up at the start, instead of all of the command containers as well. The following are built for our web server, with their exposed ports detailed:

• nginx - :80
• mysql - :3306
• php - :9000
• redis - :6379
• mailhog - :8025
• frontend - :3002

Four additional containers are included that handle Composer, NPM, and Artisan commands without having to have these platforms installed on your local computer. Use the following command examples from your project root, modifying them to fit your particular use case.

• docker-compose run --rm composer update
• docker-compose run --rm npm run dev
• docker-compose run --rm artisan migrate

Connecting to remote MySQL database

If you choose to connect to a remote database from the container, follow the steps below:

• Run cp .env.example .env in your terminal or copy the .env.example file and paste/save as .env
• Update the connection parameters in the .env file to match your server IP address, created database and user parameters.

Note:

• All IP addresses are blocked and added to a list to access the server by default. So, before connecting to MySQL from another computer, the connecting computer must be enabled as an Access Host.
• You may add the IP address of the mysql service 192.168.80.10 to your access host if you still can't establish a connection.
• This tutorial should help if you feel stuck.

Permissions Issues

If you encounter any issues with filesystem permissions while visiting your application or running a container command, try completing one of the sets of steps below.

If you are using your server or local environment as the root user:

• Bring any container(s) down with docker-compose down
• Replace any instance of php.dockerfile in the docker-compose.yml file with php.root.dockerfile
• Re-build the containers by running docker-compose build --no-cache

If you are using your server or local environment as a user that is not root:

• Bring any container(s) down with docker-compose down
• In your terminal, run export UID=$(id -u) and then export GID=$(id -g)
• If you see any errors about readonly variables from the above step, you can ignore them and continue
• Re-build the containers by running docker-compose build --no-cache

Then, either bring back up your container network or re-run the command you were trying before, and see if that fixes it.

Persistent MySQL Storage

By default, whenever you bring down the Docker network, your MySQL data will be removed after the containers are destroyed. If you would like to have persistent data that remains after bringing containers down and back up, do the following:

1. Create a mysql folder in the project root, alongside the nginx and src folders.
2. Under the mysql service in your docker-compose.yml file, add the following lines:

volumes:
  - ./mysql:/var/lib/mysql

Usage in Production

While I originally created this template for local development, it's robust enough to be used in basic Laravel application deployments. The biggest recommendation would be to ensure that HTTPS is enabled by making additions to the nginx/default.conf file and utilizing something like Let's Encrypt to produce an SSL certificate.

Compiling Assets

This configuration should be able to compile assets with both laravel mix and vite. In order to get started, you first need to add --host 0.0.0.0 after the end of your relevant dev command in package.json. So for example, with a Laravel project using Vite, you should see:

"scripts": {
  "dev": "vite --host 0.0.0.0",
  "build": "vite build"
},

Then, run the following commands to install your dependencies and start the dev server:

• docker-compose run --rm npm install
• docker-compose run --rm --service-ports npm run dev

After that, you should be able to use @vite directives to enable hot-module reloading on your local Laravel application.

Want to build for production? Simply run docker-compose run --rm npm run build.

React Frontend

The current version of React (18 as of today) uses node under the hood to help you generate a boilerplate version of a React application. Using the provided Docker Hub image, getting an instance set up and ready is simple and straight-forward. The node service is included in the docker-compose.yml file, and spins up alongside the webserver and database services. Your code will live in the src/frontend file directory as explained in Usage.

To see the app and test your changes, visit localhost:3002 after running docker-compose up -d app.

MailHog

The current version of Laravel (9 as of today) uses MailHog as the default application for testing email sending and general SMTP work during local development. Using the provided Docker Hub image, getting an instance set up and ready is simple and straight-forward. The service is included in the docker-compose.yml file, and spins up alongside the webserver and database services.

To see the dashboard and view any emails coming through the system, visit localhost:8025 after running docker-compose up -d site.