Building a Web Application using Laravel, NuxtJS and Docker

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.

On the other hand, NuxtJS is a progressive JavaScript framework used for building server-side-rendered (SSR) web applications. It is built on top of VueJS and provides developers with a set of tools and libraries that help them write universal, performant and scalable web applications.

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:

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

cd 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:

docker-compose down

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.

Conclusion

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!