DEV Community: V

1-liner Docker commands for React project

Wed, 10 Mar 2021 09:53:34 +0000

Contents
Intro
Obtain node_modules Dependencies
Start Development Scripts
- Developments Server
- Running jest with --watchAll
Optional Improvements
- Shell Script Wrapper
- Pre-commit Hooks with husky
- Repo
Final Thoughts

Intro

Let's say you're primarily a backend developer who works with docker frequently, and you don't want to have nvm and multiple node versions installed. You still want to checkout a frontend project, and maybe start a node/react frontend to see how your system connects, or maybe perform some static analysis on your IDE, these are some good one-liner docker commands to quickly get it up and running. No node/npm needed in your host, no custom Dockerfile or docker build process required.

Obtain `node_modules` Dependencies

After pulling your project from source control, cd /your/project/folder, run the following docker command in a terminal:

$
docker run --rm -it -v "$(pwd):/app" -w "/app" -u $UID node:12-alpine yarn install

Note: I'm using yarn here, if you're using npm, simply replace yarn install with npm i (shorthand) or npm install

outputs:

yarn install v1.22.5
[1/4] Resolving packages...
[2/4] Fetching packages...
...

You can notice node_modules being populated in your host:

$
ls -la | grep node_modules

outputs

drwxr-xr-x 1050 user user  36864 Mar  9 20:27 node_modules

The idea is to run a container while volume-mounting our host folder to the container. As we obtain node_modules using yarn install from within the container, with volume mounting, we effectively persist it into our host workspace folder, which allows us to perform static analysis afterwards.

Let's break down this command so next time you can remember it instead of having to pull out your notes.

node:12-alpine: Name of the Dockerfile which we will pull from Docker hub in order to run our container. You can check out other tags for node images on: https://hub.docker.com/_/node/
--rm and -it:
- --rm tells docker to clean up the trailing container after yarn install completes and the script succeeds.
- -it indicates interactive mode, which connects stdin/stdout of the container, redirecting input/output from/to your terminal shell.
-v, -w and -u:
- -v "$(pwd):/app": We're mounting the project's folder into /app inside the container. A common way to build Dockerfile for a node app (for example for CI/CD or containerised deployments) is to use ADD or COPY directive in your Dockerfile. However we're directly mounting the host files to avoid rebuilding the container at every change, for ease of development.
- -w "/app": This parameter sets the container WORKDIR to /app, the same directory we mounted our code into, in order to make every command (e.g. yarn install or yarn start) we docker run to point at the folder.
- -u $UID: With volume mounting, commands we execute inside the container's mounted volume will generate files that are then persisted back on the host's project folder. With -u set, we execute the command as the host's user uid, so we have full control over our host's node_modules.

Start Development Scripts

Developments Server

To start development server and test your app, run:

$
docker run --rm -it -v "$(pwd):/app" -w "/app" -u $UID -p 3000:3000 -e CHOKIDAR_USEPOLLING=true --env-file="$(pwd)/.env" node:12-alpine yarn start

outputs:

Compiled successfully!

You can now view react-docker in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://172.17.0.2:3000

Note that the development build is not optimized.
To create a production build, use yarn build.

And our app is up and running:

Apart from the config parameters applied similarly to our yarn install script, we add a few more for development purposes.

-p 3000:3000: I'm testing with a react project. Since the default react-scripts start runs on port 3000, I want to map that port to my host's port, which could be arbitrary instead of 3000 (say for example you're running multiple front-end projects). This makes the development server accessible via localhost:3000.
-e CHOKIDAR_USEPOLLING=true: With this option, node from within the container will be able to watch any change in the project's mounted files, and reload the app accordingly with the configured webpack inside react-scripts. Take out this option if you don't want live polling for file changes.
--env-file="$(pwd)/.env: react as well as many other front-end libraries want to make use of environment variables, for example for different build target, different feature flags, etc. This option will forward all the variables declared in your project's folder's .env file to the container environment variables, which can be convenient for testing. Take this option out if you don't use environment variables in your setup.

Notice how react-scripts is letting us know the development server is accessible via http://172.17.0.2:3000/. This is simply the container service provided ip address by docker default network. We don't have to concern ourselves with this because we'll never access it from within the container. And since the host port is mapped to the container's port, we can access it on our host computer browser via localhost:3000.

Running `jest` with `--watchAll`

If you use react-scripts or jest, with the following configs in package.json

...

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",

...

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "jest --coverage",

If you would like to run test watch, simply use these configs:

$
docker run --rm -it -v "$(pwd):/app" -w "/app" -u $UID -e CHOKIDAR_USEPOLLING=true --env-file="$(pwd)/.env" node:12-alpine yarn test --watchAll

outputs:

yarn run v1.22.5
$ react-scripts test --watchAll

 PASS  src/App.test.tsx
  ✓ renders learn react link (37 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        2.349 s
Ran all test suites.

Watch Usage
 › Press f to run only failed tests.
 › Press o to only run tests related to changed files.
 › Press q to quit watch mode.
 › Press p to filter by a filename regex pattern.
 › Press t to filter by a test name regex pattern.
 › Press Enter to trigger a test run.

Note: --watch, while giving better performance isn't possible without git installed, which is the case for the pre-built node alpine image on dockerhub. For a more feature-rich containerised set-up, refer to this great article by Michael Herman: Dockerizing a React App.

Optional Improvements

Shell Script Wrapper

You can notice how the parameters can be set similarly for each of our yarn/npm command. Thus, it would be reasonable to wrap them in a bash script, accept arbitrary arguments, so we can call the containerised yarn with any subcommand or parameters.

If you use the one-liner command, write this script, name it something like docker-yarn.sh:

#!/bin/bash

args="$@"
echo "yarn $args"
docker run --rm -i -v "$(pwd):/app" -w "/app" -u $UID -e CHOKIDAR_USEPOLLING=true --env-file="$(pwd)/.env" node:12-alpine yarn $args

Note: Substitute yarn for npm if you use npm.

Note: I'm using -i instead of -it for husky's git hooks explained below.

chmod and run:

$
chmod ug+x docker-yarn.sh

$
./docker-yarn.sh install

Git Hooks with `husky`

If you have a pre-commit hook like husky installed, this will be what your project likely has in package.json:

  "devDependencies": {
    "husky": "^5.1.3"
  },

and say .husky/pre-push:

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

yarn run lint && yarn test --watchAll=false

Since you don't want to change your devDependencies (other team members might depend on it), and you want your npm to be dockerised, you can create a shell script similar to the above section (Bash script wrapper) which wraps a dockerised yarn/npm, then alias/symlink it as npm for your host machine.

For demonstration, I'll put it inside /var/scripts/docker-yarn.sh. Then pick a directory that is included in your PATH.

$
echo $PATH

outputs

...:/usr/local/sbin:/usr/local/bin:...

One of mine includes /usr/local/bin, so I'll be symlink the yarn wrapper there.

$
sudo ln -s /var/scripts/docker-yarn.sh /usr/local/bin/yarn

To confirm:

$
which yarn

outputs:

/usr/local/bin/yarn

and:

$
cat $(which yarn)

outputs:

#!/bin/bash

args="$@"
echo "yarn $args"
docker run --rm -i -v "$(pwd):/app" -w "/app" -u $UID -e CHOKIDAR_USEPOLLING=true --env-file="$(pwd)/.env" node:12-alpine yarn $args

To make sure it is working, run a yarn command with arguments. Here I'm testing by installing a package, and running yarn test --watch

Installing package:

$
yarn add date-fns

outputs

yarn add date-fns
yarn add v1.22.5
[1/4] Resolving packages...
[2/4] Fetching packages...

Double check:

$
ls -la node_modules | grep date-fns

outputs

drwxr-xr-x  209 user user  12288 Mar  9 22:02 date-fns

Next command:

$
yarn test --watch

outputs

yarn test --watch
yarn run v1.22.5
$ react-scripts test --watch

PASS  src/App.test.tsx
  ✓ renders learn react link (52 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        3.283 s
Ran all test suites.

Watch Usage
 › Press f to run only failed tests.
 › Press o to only run tests related to changed files.
 › Press q to quit watch mode.
 › Press p to filter by a filename regex pattern.
 › Press t to filter by a test name regex pattern.
 › Press Enter to trigger a test run.

And finally our git hooks. Commit:

$
git commit -m "fix: wrapper script"

outputs

yarn run lint
yarn run v1.22.5
$ eslint --fix
Done in 0.41s.
[master f8e398c] fix: wrapper script
 Date: Wed Mar 10 20:37:36 2021 +1100
 1 file changed, 3 insertions(+), 4 deletions(-)

push:

$
git push origin master

outputs

yarn run lint
yarn run v1.22.5
$ eslint --fix
Done in 0.41s.
yarn test --watchAll=false
yarn run v1.22.5
$ react-scripts test --watchAll=false
PASS src/App.test.tsx
  ✓ renders learn react link (46 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        2.769 s
Ran all test suites.
Done in 4.06s.
Counting objects: 3, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (3/3), done.
Writing objects: 100% (3/3), 413 bytes | 413.00 KiB/s, done.
Total 3 (delta 1), reused 0 (delta 0)
remote: Resolving deltas: 100% (1/1), completed with 1 local object.
To github.com:veevidify/react-docker.git
   ec7162b..f8e398c  master -> master

Repo

Repository for reference: https://github.com/veevidify/react-docker

Final Thoughts

If you work primarily with front-end projects like react, I would recommend using nvm instead of containerised, since any issue would be much easier to troubleshoot. However, this article aimed to show you how powerful docker can be, and with some basic understanding of image, container and volume, with a couple of clever configs, we can achieve almost any environment or setup.

docker-compose up your entire Laravel + Apache + MySQL development environment.

Thu, 04 Apr 2019 14:28:30 +0000

Contents
Intro
The set-up
Webserver image for Laravel
docker-compose.yml
Up and Running
Helper scripts (optional)
- container
- db
- composer
- php-artisan
- phpunit
TL;DR

Intro

When on-boarding new devs to contribute to your project, you probably don't want them to spend hours hopping between documentations and StackOverflow, figuring out how to get anything working. There is just so much stuffs they would potentially have to go through to have a version of the app running locally: php, ini config, php extensions, apache configs, apache site-enabled configs, set up mysql, ... the list goes on. That is except you have a docker environment set up, so they can simply:



$ git clone git@git.repo.url/laravel-project
$ cd laravel-project
$ docker-compose up

and be able to start with composer, php artisan, and write some code.

The set-up

To demo an existing laravel app, I will be using a blank laravel app cloned from https://github.com/laravel/laravel.git



$ git clone https://github.com/laravel/laravel.git
$ cd laravel
$ git checkout -b dev-env
$ cp .env.example .env

Here's how I will structure my docker environment files:



  app
  |__bootstrap
  |__config
  |__database
  |__public
  |__resources
  |__routes
  |__run               (+)
     |__.gitkeep       (+)
  |__storage
  |__tests
  .dockerignore        (+)
  .editorconfig
  .env
  .env.example
  .gitattributes
  .gitignore
  artisan
  CHANGELOG.md
  composer.json
  docker-compose.yml   (+)
  Dockerfile           (+)
  package.json
  phpunit.xml
  readme.md
  server.php
  webpack.mix.js

The idea is we'll be builiding the image as well as running docker-compose commands from the main application folder, while run folder contains necessary config and local database for development. With docker volumes, we'll be able to keep the source, the vendor dependencies and local development database in our host, while all the runtime (apache, php) are kept and manged by the container.

In this article I'll explain to the best of my knowledge what each part of the set-up does. TL;DR as well as github link to list all the changes at the bottom if you just need a working version.

Webserver image for Laravel

php-apache:7.2 image from the php dockerhub has out-of-the-box configurable and functional Apache webserver running mod_php, which is a great place to start with. We'll need a couple of extensions and some access control configuration to make development easier (optional). Here is the Dockerfile:



FROM php:7.2-apache

RUN apt-get update

# 1. development packages
RUN apt-get install -y \
    git \
    zip \
    curl \
    sudo \
    unzip \
    libicu-dev \
    libbz2-dev \
    libpng-dev \
    libjpeg-dev \
    libmcrypt-dev \
    libreadline-dev \
    libfreetype6-dev \
    g++

# 2. apache configs + document root
ENV APACHE_DOCUMENT_ROOT=/var/www/html/public
RUN sed -ri -e 's!/var/www/html!${APACHE_DOCUMENT_ROOT}!g' /etc/apache2/sites-available/*.conf
RUN sed -ri -e 's!/var/www/!${APACHE_DOCUMENT_ROOT}!g' /etc/apache2/apache2.conf /etc/apache2/conf-available/*.conf

# 3. mod_rewrite for URL rewrite and mod_headers for .htaccess extra headers like Access-Control-Allow-Origin-
RUN a2enmod rewrite headers

# 4. start with base php config, then add extensions
RUN mv "$PHP_INI_DIR/php.ini-development" "$PHP_INI_DIR/php.ini"

RUN docker-php-ext-install \
    bz2 \
    intl \
    iconv \
    bcmath \
    opcache \
    calendar \
    mbstring \
    pdo_mysql \
    zip

# 5. composer
COPY --from=composer:latest /usr/bin/composer /usr/bin/composer

# 6. we need a user with the same UID/GID with host user
# so when we execute CLI commands, all the host file's ownership remains intact
# otherwise command from inside container will create root-owned files and directories
ARG uid
RUN useradd -G www-data,root -u $uid -d /home/devuser devuser
RUN mkdir -p /home/devuser/.composer && \
    chown -R devuser:devuser /home/devuser

Starting with the webserver itself, php-apache image by default set document root to /var/www/html. However since laravel index.php is inside /var/www/html/public, we need to edit the apache config as well as sites-available. We'll also enable mod_rewrite for url matching and mod_headers for configuring webserver headers.



ENV APACHE_DOCUMENT_ROOT=/var/www/html/public
RUN sed -ri -e 's!/var/www/html!${APACHE_DOCUMENT_ROOT}!g' /etc/apache2/sites-available/*.conf
RUN sed -ri -e 's!/var/www/!${APACHE_DOCUMENT_ROOT}!g' /etc/apache2/apache2.conf /etc/apache2/conf-available/*.conf

Moving onto php configuration, we start by using the provded php.ini, then add a couple of extensions via docker-php-ext-install. The order of doing these tasks are not important (php.ini won't be overwritten) since the configs that loads each extensions are kept in separate files.

For composer, what we're doing here is fetching the composer binary located at /usr/bin/composer from the composer:latest docker image. Obviously you can specify any other version you want in the tag, instead of latest. This is part of docker's multi-stage build feature.



COPY --from=composer:latest /usr/bin/composer /usr/bin/composer

Final steps are optional. Since we're going to mount the application source code from host into the container for development, any command run from within the container CLI shouldn't affect host files/folder ownership. This is helpful for configs and such generated by php artisan. Here I'm using ARG to let other team members set their own uid that matches their host user uid.



ARG uid
RUN useradd -G www-data,root -u $uid -d /home/devuser devuser
RUN mkdir -p /home/devuser/.composer && \
    chown -R devuser:devuser /home/devuser

`docker-compose.yml`

Webserver is set. Now we just need to bring a database container in using a docker-compose config

docker-compose.yml



version: '3.5'

services:
  laravel-app:
    build:
      context: '.'
      args:
        uid: ${UID}
    container_name: laravel-app
    environment:
      - APACHE_RUN_USER=#${UID}
      - APACHE_RUN_GROUP=#${UID}
    volumes:
      - .:/var/www/html
    ports:
      - 8000:80
    networks:
      backend:
        aliases:
          - laravel-app

  mysql-db:
    image: mysql:5.7
    container_name: mysql-db
    volumes:
      - ./run/var:/var/lib/mysql
    environment:
      - MYSQL_ROOT_PASSWORD=securerootpassword
      - MYSQL_DATABASE=db
      - MYSQL_USER=dbuser
      - MYSQL_PASSWORD=secret
    networks:
      backend:
        aliases:
          - db

networks:
  backend:
    name: backend-network

A few things to go through here. First of all for the laravel container:

build:context refers to the Dockerfile that we just written, kept in the same directory as docker-compose.yml.
args is for the uid I mentioned above. We'll write UID value in the app .env file to let docker-compose pick it up.

.env



...
MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

UID=1000

APACHE_RUN_USER and APACHE_RUN_GROUP ENV variables comes with php-apache. By doing this, files generated by the webserver will also have consistent ownership.
volumes directive tells docker to mount the host's app source code into /var/www/html - which is consistent with apache configuration. This enables any change from host files be reflected in the container. Commands such as composer require will add vendor to host, so we won't need to install dependencies everytime container is brought down and up again.
If you are building container for CI / remote VM envrionment however, you'll need to add the source files into the container pre-build. For example: ```Dockerfile

COPY . /var/www/html
RUN cd /var/www/html && composer install && php artisan key:generate

- `ports` is optional, leave out if you're fine with running it under port 80. Alternatively, it can be configurable using `.env` similar to build args:
```yaml


ports:
  - ${HOST_PORT}:80



HOST_PORT=8080

networks with aliases is also optional. By default, docker-compose create a default network prefixed with the parent folder name to connect all the services specified in docker-compose.yml. However if you have a development of more than 1 docker-compose, specifying networks name like this allow you to join it from the other docker-compose.yml files. another-app here will be able to reach laravel-app and vice versa, using the specified aliases.

docker-compose.yml



services:
   another-app:
    networks:
      backend:
        aliases:
          - another-app

networks:
  backend:
    external:
      name: backend-network

Now moving onto mysql:

mysql:5.7 is very configurable and just works well out-of-the-box. So we won't need to extend it.
Simply pick up the .env set in laravel app to set username and password for the db user: ```yaml

environment:

MYSQL_ROOT_PASSWORD=securerootpassword
MYSQL_DATABASE=${DB_DATABASE}
MYSQL_USER=${DB_USERNAME}
MYSQL_PASSWORD=${DB_PASSWORD}

- Also make sure `.env DB_HOST` set to what mysql-db service name, or its aliases:
`.env`

DB_HOST=mysql-db

- Ideally you want to keep database changes in the repository, using a series of migrations and seeders. However if you want to start the mysql container with an existing SQL dump, simply mount the SQL file:
```yaml


volumes:
   - ./run/var:/var/lib/mysql
   - ./run/dump/init.sql:/docker-entrypoint-initdb.d/init.sql

Using volumes, we're keeping the database locally under run/var, since any data written by mysqld is inside the container's /var/lib/mysql. We just need to ignore the local database in both .gitignore and .dockerignore (for build context):

.gitignore:



/node_modules
/public/hot
/public/storage
/storage/*.key
/vendor
.env
.phpunit.result.cache
Homestead.json
Homestead.yaml
npm-debug.log
yarn-error.log

run/var

.dockerignore:



run/var

Up and Running

Now let's build the environment, and get it up running. We'll also be installing composer dependencies as well as some artisan command.



$ docker-compose build && docker-compose up -d && docker-compose logs -f
Creating network "backend-network" with the default driver
Creating mysql-db    ... done
Creating laravel-app ... done
Attaching to laravel-app, mysql-db
...

Once all the containers are up and running, we can check them by docker ps:



CONTAINER ID        IMAGE                 COMMAND                  CREATED             STATUS              PORTS                  NAMES
c1ae3002d260        laravel_laravel-app   "docker-php-entrypoi…"   4 minutes ago       Up 4 minutes        0.0.0.0:8000->80/tcp   laravel-app
6f6546224051        mysql:5.7             "docker-entrypoint.s…"   4 minutes ago       Up 4 minutes        3306/tcp               mysql-db

Composer and artisan:



$ docker exec -it laravel-app bash -c "sudo -u devuser /bin/bash"



devuser@c1ae3002d260:/var/www/html$ composer install
...
Generating optimized autoload files
> Illuminate\Foundation\ComposerScripts::postAutoloadDump
> @php artisan package:discover --ansi
Discovered Package: beyondcode/laravel-dump-server
Discovered Package: fideloper/proxy
Discovered Package: laravel/tinker
Discovered Package: nesbot/carbon
Discovered Package: nunomaduro/collision
Package manifest generated successfully.



devuser@c1ae3002d260:/var/www/html$ php artisan key:generate
Application key set successfully.



devuser@c1ae3002d260:/var/www/html$ php artisan migrate
Migrating: 2014_10_12_000000_create_users_table
Migrated:  2014_10_12_000000_create_users_table
Migrating: 2014_10_12_100000_create_password_resets_table
Migrated:  2014_10_12_100000_create_password_resets_table



devuser@c1ae3002d260:/var/www/html$ php artisan make:auth
Authentication scaffolding generated successfully.

With hostfile:



127.0.0.1       laravel-app.local

We're all set!

Helper scripts (optional)

From time to time, I want to be able to quickly run CLI commands (composer, artisan, etc.) without having to type docker exec everytime. So here are some bash scripts I made wrapping around docker exec:

`container`



#!/bin/bash

docker exec -it laravel-app bash -c "sudo -u devuser /bin/bash"

Running ./container takes you inside the laravel-app container under user uid(1000) (same with host user)



$ ./container
devuser@8cf37a093502:/var/www/html$

`db`



#!/bin/bash

docker exec -it mysql-db bash -c "mysql -u dbuser -psecret db"

Running ./db will connect to your database container's daemon using mysql client.



$ ./db
mysql>

`composer`



#!/bin/bash

args="$@"
command="composer $args"
echo "$command"
docker exec -it laravel-app bash -c "sudo -u devuser /bin/bash -c \"$command\""

Run any composer command, example:



$ ./composer dump-autoload
Generating optimized autoload files> Illuminate\Foundation\ComposerScripts::postAutoloadDump
> @php artisan package:discover --ansi
Discovered Package: beyondcode/laravel-dump-server
Discovered Package: fideloper/proxy
Discovered Package: laravel/tinker
Discovered Package: nesbot/carbon
Discovered Package: nunomaduro/collision
Package manifest generated successfully.
Generated optimized autoload files containing 3527 classes

`php-artisan`



#!/bin/bash

args="$@"
command="php artisan $args"
echo "$command"
docker exec -it laravel-app bash -c "sudo -u devuser /bin/bash -c \"$command\""

Run php artisan commands, example:



$ ./php-artisan make:controller BlogPostController --resource
php artisan make:controller BlogPostController --resource
Controller created successfully.

`phpunit`



#!/bin/bash

args="$@"
command="vendor/bin/phpunit $args"
echo "$command"
docker exec -it laravel-app bash -c "sudo -u devuser /bin/bash -c \"$command\""

Run ./vendor/bin/phpunit to execute tests, example:



$ ./phpunit --group=failing
vendor/bin/phpunit --group=failing
PHPUnit 7.5.8 by Sebastian Bergmann and contributors.



Time: 34 ms, Memory: 6.00 MB

No tests executed!

TL;DR

Links:

Dockerfile consists of basic apache document root config, mod_rewrite and mod_header, composer and sync container's uid with host uid.

docker-compose.yml boots up php-apache (mount app files) and mysql (mount db files), using networks to interconnect.

Use the environment:



$ docker-compose build && docker-compose up -d && docker-compose logs -f
$ ./composer install
$ ./php-artisan key:generate

DEV Community: V

1-liner Docker commands for React project

Contents

Intro

Obtain node_modules Dependencies

Start Development Scripts

Developments Server

Running jest with --watchAll

Optional Improvements

Shell Script Wrapper

Git Hooks with husky

Repo

Final Thoughts

docker-compose up your entire Laravel + Apache + MySQL development environment.

Contents

Intro

The set-up

Webserver image for Laravel

docker-compose.yml

Up and Running

Helper scripts (optional)

container

db

composer

php-artisan

phpunit

TL;DR

Obtain `node_modules` Dependencies

Running `jest` with `--watchAll`

Git Hooks with `husky`

`docker-compose.yml`

`container`

`db`

`composer`

`php-artisan`

`phpunit`