Laravel is a free, open-source PHP web application framework used for building web applications, APIs, and even command-line applications. It follows the Model-View-Controller (MVC) architectural pattern and provides developers with a set of tools and libraries that help them write clean, reusable and maintainable code.
Why Laravel and NuxtJS together?
Laravel and NuxtJS work together to create a single web application where Laravel handles the backend API and NuxtJS handles the frontend view layer. This setup is called a single application.
In a single application setup, Laravel serves as the backend and provides a RESTful API that NuxtJS can consume. Laravel can handle tasks such as authentication, database interactions, and business logic. NuxtJS, on the other hand, can consume the API endpoints provided by Laravel and handle tasks such as routing, middleware, and rendering the frontend view.
The benefits of using Laravel and NuxtJS together in a single application include:
- Separation of concerns: Laravel handles the backend logic while NuxtJS handles the frontend view, allowing for better separation of concerns and a cleaner codebase.
- Improved performance: Server-side rendering in NuxtJS can improve the performance of the application, while Laravel’s caching and optimization tools can help improve the backend performance.
- Scalability: Separating the backend and frontend allows for easier scalability as each can be scaled independently based on the requirements of the application.
- Better development experience: Laravel’s developer-friendly tools and NuxtJS’s ease of use and powerful features make for a better development experience.
In nutshell, Laravel and NuxtJS can work together to create a powerful and scalable single application that leverages the strengths of both frameworks.
If you’re a developer building a web application with Laravel and NuxtJS, you might find yourself running into some challenges when it comes to setting up your development environment. One solution to this problem is to use Docker, a popular containerization platform that allows you to easily package your application and its dependencies into a single image that can be run on any machine. In this blog post, we’ll walk you through the steps of using Docker for Laravel and NuxtJS to create a single application that you can easily deploy and manage.
Step 1: Install Docker
The first step is to install Docker on your machine. Docker is available for Windows, macOS, and Linux, and can be downloaded from the official Docker website. Once you’ve installed Docker, make sure it’s running by opening a terminal window and typing:
docker version Client: Cloud integration: v1.0.31 Version: 20.10.23 API version: 1.41 Go version: go1.18.10 Git commit: 7155243 Built: Thu Jan 19 17:35:19 2023 OS/Arch: darwin/arm64 Context: desktop-linux Experimental: true Server: Docker Desktop 4.17.0 (99724) Engine: Version: 20.10.23 API version: 1.41 (minimum version 1.12) Go version: go1.18.10 Git commit: 6051f14 Built: Thu Jan 19 17:31:28 2023 OS/Arch: linux/arm64 Experimental: false containerd: Version: 1.6.18 GitCommit: 2456e983eb9e37e47538f59ea18f2043c9a73640 runc: Version: 1.1.4 GitCommit: v1.1.4-0-g5fd4c4d docker-init: Version: 0.19.0 GitCommit: de40ad0
This should display the version of Docker you just installed.
Step 2: Create a Laravel Application
If you’re developing on a Mac and Docker Desktop is already installed, you can use a simple terminal command to create a new Laravel project. For example, to create a new Laravel application in a directory named “example-app”, you may run the following command in your terminal:
curl -s "https://laravel.build/example-app" | bash
Sail installation may take several minutes while Sail’s application containers are built on your local machine. After the project has been created, you can navigate to the application directory and start Laravel Sail. Laravel Sail provides a simple command-line interface for interacting with Laravel’s default Docker configuration:
Next, create a new Laravel application by running the following command in your terminal:
docker run --rm -v $(pwd):/app composer create-project --prefer-dist laravel/laravel app
This command will create a new Laravel project in a directory called app in your current working directory. The –rm option tells Docker to remove the container after it’s done running, and the -v option mounts the current directory to the /app directory inside the container.
Step 3: Create a NuxtJS Application
Now that we have our Laravel application set up, we can create a new NuxtJS application by running the following commands:
mkdir app/client cd app/client docker run --rm -v $(pwd):/app node:lts npx create-nuxt-app .
The first command creates a new directory called client inside our Laravel project directory, and the second command runs a Node.js container with the LTS version and uses the create-nuxt-app tool to create a new NuxtJS application in the current directory.
Step 4: Create a Docker Compose File
To manage our Docker containers, we’ll use Docker Compose, a tool that allows us to define and run multi-container Docker applications. Create a new file called docker-compose.yml in your project directory, and add the following contents:
version: '3' services: web: build: context: . dockerfile: Dockerfile container_name: laravel-nuxt restart: always volumes: - .:/var/www/html - ./client:/var/www/html/client ports: - "8080:80" environment: - APP_ENV=local - DB_HOST=db - DB_PORT=3306 - DB_DATABASE=laravel - DB_USERNAME=root - DB_PASSWORD=secret depends_on: - db db: image: mysql:5.7 container_name: mysql restart: always environment: - MYSQL_ROOT_PASSWORD=secret - MYSQL_DATABASE=laravel ports: - "33061:3306" volumes: - ./database:/var/lib/mysql
This file defines two services: web and db. The web service is the main Laravel and NuxtJS application, and the db service is a MySQL database container. We specify the Dockerfile to use for the web service, as well as the volumes to mount and ports to expose.
Step 5: Create a Dockerfile
Next, create a new file called Dockerfile in your project directory, and add the following contents:
FROM php:7.4-apache RUN apt-get update && \ apt-get install -y \ libzip-dev \ zip \ unzip \ libicu-dev \ libpng-dev \ libjpeg-dev \ libfreetype6-dev \ libpq-dev \ && docker-php-ext-configure gd --with-freetype --with-jpeg \ && docker-php-ext-install -j$(nproc) gd pdo_mysql mysqli zip intl opcache RUN pecl install xdebug-3.1.1 && docker-php-ext-enable xdebug
COPY . /var/www/html RUN chown -R www-data:www-data /var/www/html \ && a2enmod rewrite
This Dockerfile uses the official PHP Apache image as its base, and installs the necessary dependencies for our Laravel and NuxtJS application. We also install and enable the Xdebug extension for debugging purposes.
Step 6: Build and Run the Docker Containers
With our Docker Compose file and Dockerfile in place, we can now build and run our Docker containers. In your terminal, run the following command:
docker-compose up -d --build
This will build the Docker images and start the containers in detached mode, meaning they’ll run in the background.
docker compose ps
NAME IMAGE COMMAND SERVICE CREATED STATUS PORTS
laravel-nuxt laravel-web "docker-php-entrypoi…" web 2 minutes ago Up
2 minutes 0.0.0.0:8080->80/tcp
mysql mysql:5.7 "docker-entrypoint.s…" db 2 minutes ago Up 2 minutes 33060/tcp, 0.0.0.0:33061->3306/tcp
If you’re in hurry and want to setup a full-fledge Laravel and NuxtJS app, follow these 3 steps:
git clone https://github.com/collabnix/docker-laravel-nuxtjs
docker compose up -d
Once the containers are up and running, you should be able to see the services up and running.
You should be able to access your Laravel application at http://localhost:8080, and your NuxtJS application at http://localhost:8080/client.
Step 7: Managing the Docker Containers
To stop the Docker containers, run the following command:
This will stop and remove the containers, but preserve any data stored in the database volume. If you want to remove everything, including the database volume, run the following command:
docker-compose down --volumes
You can also view the logs of your containers by running the following command:
docker-compose logs -f
This will display the logs of all the containers in real-time.
Using Docker for Laravel and NuxtJS makes it easy to set up and manage your development environment, and ensures that your application will run consistently across different machines. With just a few simple commands, you can create a fully-functional single application that includes both your backend and frontend code. So give it a try and see how Docker can streamline your development workflow!