{"data":{"post":{"fields":{"slug":"/Dev-and-prod-ready-Docker-setup-for-SPA-app/","date":"2018-10-31"},"html":"

PS. If you’re familiar with Docker and don’t need a step by step guide, check only Multiple compose files, Configure it and Magic of multi-stage build. Code is available on GitHub.

\n

Table of contents

\n\n

Intro

\n

Nowadays, frontend applications have a lot of dependencies (everyone knows these funny memes about the size of node_modules directory) and ways to be successfully started, deployed and built, so it’s not a piece of cake.\nI think everyone started with client apps where we’re editing files live on production and probably everything was in one file, or if not, the whole files were available from the client side.\nFortunately, those times is gone, for most of us. :)

\n

Source vs. Artifact

\n

Due to optimization, performance etc., actual standards are to parse, minify and combine our production code.\nIn this article, we will focus on setting up development and production environment for our app, but this setup will allow you to prepare more environments in less than 3 minutes.\nSo what is the difference between source and artifact in the SPA application?\nTake a look for this simple React app structure:

\n
  .\n  ├── /build/                     # The folder for compiled production ready output\n  ├── /node_modules/              # 3rd-party libraries and utilities\n  ├── /src/                       # The source code of the application\n  │   ├── /components/            \n  │   ├── /routes/                \n  │   ├── /styles/                \n  │   ├── /...                    \n  │   └── ...                     \n  ├── /...\n  ├── package.json                # Project info like dependencies, authors, scripts etc.                           \n  └── ...
\n

The whole /src folder is our app’s heart - main code that we’re developing. Running applications locally, on development environment by some webpack-dev-server or another serving tool, gives us an opportunity to have hot module reload, live preview, fast run etc.\nIt’s really good for development purpose and we’ll use it!

\n

Docker, wtf is that?

\n

I know, you probably know what is Docker and how it works, but if not, let me show you the short quote from What is a Container which is a great definition of Docker base block.

\n
\n

A container is a standard unit of software that packages up code and all its dependencies so the application runs quickly and reliably from one computing environment to another. A Docker container image is a lightweight, standalone, executable package of software that includes everything needed to run an application: code, runtime, system tools, system libraries and settings.

\n
\n

I have highlighted key information which will help you understand how it works and how huge benefits it brings to our lives are.\nLet’s tightly pack our application with all dependencies into a light-weight block called container to run it quickly on every environment.

\n
\n

Available for both Linux and Windows-based applications, the containerized software will always run the same, regardless of the infrastructure. Containers isolate software from its environment and ensure that it works uniformly despite differences for instance between development and staging.

\n
\n

\"Architecture

\n

Always the same result, bypassing the infrastructure.\nIt is a result of the way Docker works, shown above on architecture scheme.\nFor more details, check What is a Container.

\n

Prepare your own playground

\n

We’ll start with setting up our development environment based on Docker & docker-compose and create-react-app template.\nFirstly, we need to set up our basic app. Of course in the bigger project, we’ll have many more dependencies, services and complexity but the problem solution is almost the same.

\n

Setup create-react-app boiler template

\n

Create our boiler template app:

\n
$ yarn create react-app docker-spa-setup
\n

After that, we should see a message like this:

\n
Success! Created docker-spa-setup at /path/to/docker-spa-setup
\n

Now, let’s run our hello world application:

\n
$ cd docker-spa-setup\n$ yarn start
\n

After a few seconds, we should see information regarding successfully compiled and served under localhost:3000, with all things we need to easily develop an app.\nGreat!

\n

Install base tools - Docker & docker-compose

\n

Now the real fun begins.\nNext things that we’ll need will be docker and docker-compose.\nThis tutorial was written using:

\n
$ docker -v\nDocker version 18.06.0-ce, build 0ffa825\n$ docker-compose -v\ndocker-compose version 1.21.0, build 5920eb0
\n

If you don’t have docker or docker-compose on your local machine, check Docker installation guide or docker-compose installation guide.\nDue to these versions, we could use compose files over 3.6 version.\nNow, in project root directory let’s create a directory called .docker where we’ll keep the whole Docker configuration.

\n
$ mkdir .docker\n$ cd .docker
\n

Start development environment

\n

Okay, we’ve set up our own local machine, so we have all the tools we need to start our journey.\nIf you know Docker a bit, your first association may be Dockerfile!\nOf course, you’re right, but let me explain about it a bit more…

\n

Dockerfile on development env? Oh please no…

\n

\"Oh

\n

Some of you will probably not agree with me, but I will try to convince you, that using Dockerfile on development environment isn’t the best way you could choose (if not necessary, of course) - sometimes it’s a must have, but let’s say it officially: in most cases, it’s not.

\n

Dockerfile allows us to create a custom Docker image for our container from an existing one and add our changes to the build process.\nIt’s great, even we’ll be using it here in next chapters, but in production setup, where optimization, security and light-weight of the app is crucial.

\n

On the other hand, we have docker-compose, which could manage services (containers) with docker-compose.yml file.\nI would even say that it helps us to simplify the definition of our services by defining all containers in one file.\nAdditionally, it allows us to set ports, image to use, volumes, environments variables and many more! After two years with Docker in commercial products, I could say, for basic or mid-advanced projects, we could handle it with only docker-compose.\nBenefits?\nLess time under building application (mostly crucial for frontend developers working with watchers and hot reloads) because we’ll be reducing our build time without any of our custom commands for build own image.

\n

Be lighter and flexible, especially on the development environment, when you need this a lot with continuous changes you’re making.

\n

Multiple compose files

\n

Firstly, what is multiple compose files?\nBy default, our docker-compose will read base docker-compose.yml file which according to the convention, it should be our base configuration, which will be shared over all environments.\nAfter that, compose will append the final docker-compose file with override file like docker-compose.override.yml.\nWhen some services are defined in both, they will be merged together.\nThis feature is really cool and will help us to keep our setup clear and easy to maintain.

\n

So, we’ll create docker-compose.yml which will be our base for all environments, also production etc.

\n
# docker-compose.yml\nversion: '3.6'\n\nservices:\n  client:\n    env_file:\n      - .env
\n

So, what happened here? Probably you know docker-compose schema and properties, but if not, I will explain a little:

\n\n

Okay, now our Docker setup contains only base docker-compose.yml, so we need to add first override compose file for development environment: docker-compose.dev.yml

\n
# docker-compose.dev.yml\nversion: '3.6'\n\nservices:\n  client:\n    image: node:carbon\n    volumes:\n      - ..:/opt/app:cached\n    ports:\n      - "${NODE_PORT}:${NODE_PORT}"\n    working_dir: /opt/app\n    command: "/bin/sh -c 'yarn install --frozen-lockfile --production=false; yarn start'"
\n

Describe a bit more this little magic:

\n\n

Default environment variables

\n

For now, our Docker setup won’t do anything useful for us.\nAlso, if you’ll try now to run it, compose will warn you about lack of image or build source.\nFirstly, let’s add .env template file called .env.dev.dist!

\n
# .env.dev.dist\nCOMPOSE_PROJECT_NAME=docker-spa-setup\nCOMPOSE_FILE=docker-compose.yml:docker-compose.dev.yml\nNODE_ENV=development\nNODE_PORT=3000
\n

We added few environment variables:

\n\n

Our template is ready, we need to copy it to proper .env file:

\n
$ cp .env.dev.dist .env
\n

Rocket launch!

\n

Yeah! Now with this docker-compose.dev.yml and the .env file we’re able to start our app in Docker:

\n
$ docker-compose up -d\nStarting docker-spa-setup_client_1 ... done
\n

Congratulations! You set up your development environment.

\n

Production time

\n

Now we can assume that few sprints of development have passed and you have your dream MVP ready to production. But only development environment is working now - it’s heavy, not optimized and with a lot of unneeded logs.\nLet’s change it!

\n

Configure it

\n

Early on, we should add new docker-compose override for your production build, let’s call it docker-compose.prod.yml:

\n
# docker-compose.prod.yml\nversion: '3.6'\n\nservices:\n  client:\n    build:\n      context: ../\n      dockerfile: .docker/Dockerfile\n    ports:\n      - ${NGINX_PORT}:80\n    restart: unless-stopped
\n

As you can see, it’s changed a lot from dev version, so nothing could be passed up to our base docker-compose.yml file.\nNow we’ll be using the build process rather than a ready-made image from Docker Hub and nginx to serve our app.\nOf course, you could also use Apache or another HTTP server.\nOur service is called client, just as in dev setup, because we’re building this same app in another configuration, we won’t break our network connection (for example using service name rather than IPs).\nLet’s take a closer look at it:

\n\n

This basic docker-compose.prod.yml won’t handle everything, but it’s really good to start for production setup (or good skeleton for it).\nFor example, here we didn’t handle HTTPS connection on 443 port (but it’s easy to add, don’t worry #trueStory).

\n

Now let’s build our .env file for production.\nBut wait, we already have a file named .env - and it’s wrong!\nFor many reasons, as an example security, you shouldn’t keep .env files in the repository.\nIt’s really easy to change them between deploys without changing any code and also it’s very often to store in them some keys that couldn’t be public.\nThey should show us what it’s necessary for the application to work on a particular environment, but it should be completed manually (especially for private keys!).\nTo be sure we didn’t do it, we’ll add a record to .gitginore:

\n
# .gitignore\n...\n\n# docker\n.docker/.env
\n

Now let’s rename our .env to .env.dev.dist where we’ll store our development variables setup and let’s create .env.prod.dist for production.\nWith this move, whenever you’ll be changing the environment or setting it for the first time, you will have to do cp .env.{ENV}.dist .env correctly.\nNothing special, but this must be kept in mind.

\n
# .env.prod.dist\nCOMPOSE_PROJECT_NAME=docker-spa-setup\nCOMPOSE_FILE=docker-compose.yml:docker-compose.prod.yml\nNODE_ENV=production\nNGINX_PORT=80
\n

We’ve three differences between our .env.dev.dist file, let’s describe them:

\n\n

Nothing hard, isn’t it?

\n

Magic of multi-stage build

\n

This is the moment everyone was waiting for - we can create Dockerfile with mutli stage build!

\n
# Dockerfile\n# Stage 1 - the build process\nFROM node:carbon-alpine as builder\nRUN mkdir /opt/app\nWORKDIR /opt/app\nCOPY . ./\nRUN yarn; yarn build\n\n# Stage 2 - the production environment\nFROM nginx:alpine\n\nCOPY .docker/nginx/default.conf /etc/nginx/conf.d/\nRUN rm -rf /usr/share/nginx/html/*\nCOPY --from=builder /opt/app/build /usr/share/nginx/html\n\nCMD ["nginx", "-g", "daemon off;"]
\n

Wow, what happened here?\nLet’s look on first stage, where we’ll build our app.

\n
    \n
  1. Firstly, we pull node:carbon-alpine image (alpine is a lightweight image without any not necessary tools) and name it builder in our Dockerfile space.
    2. \n
  2. In the second line, we’re creating directory /opt/app where we’ll have our root project directory.
    3. \n
  3. Tell Docker, that this folder (/opt/app) in a container is root, where we’ll be executing everything later (with this we don’t have to use absolute paths).
    4. \n
  4. Now we’re copying the whole project here.
    5. \n
  5. Run dependency install and production build to create our app. Of course, you could also use npm: npm i; npm run build.
    6. \n
\n

Probably you’re thinking now - okay, we had our container, our app is built, why not add the second service as HTTP server in docker-compose.prod.yml file and serve this app?\nHere is a place, where multi-stage build enters!\nOf course, you’re right, but in this container, you’d the whole app source, dependencies (node_modules bigger than the sun) and nothing to serve it (right now).\nThe multi-stage could make it thinner, with nginx and only with one service!\nSounds cool?\nLet’s check what is going on in the second build stage.

\n
    \n
  1. Now, let’s pull nginx:alpine image (lightweight HTTP server) which will be serving our app (and in future could be also reverse proxy, load balancer etc.).
    2. \n
  2. After that, we need to set it up. Luckily, it could be only copying default configuration prepared earlier (it will be displayed below, due to fact configuring nginx could be placed for another series of posts, we’ll leave it for now).
    3. \n
  3. Remove everything from default nginx serve directory (be sure we have clean space for our application).
    4. \n
  4. Magic is here! Now we’re copying only our build output from builder container (our node image where the application was built) to our new container with nginx to default serve location. After this move, Docker will automatically remove old, not used builder container and we’ll have nginx:alpine container with only built application files as client service. Amazing!
    5. \n
  5. A command which will be used to run container, here we’re starting nginx with flag daemon off so he will be run in the background and serve our application.
    6. \n
\n

Almost done!

\n

Enter the stage!

\n

The last thing to do, create space for nginx related properties/files (it’s a good way to store files & configurations with their purpose, also it’s easier to manage it in bigger projects):

\n
$ mkdir .docker/nginx
\n

And create default.conf file to set up our server:

\n
# default.conf\nserver {\n  listen 80;\n\n  sendfile on;\n  default_type application/octet-stream;\n\n  server_name your-site.com;\n\n  gzip on;\n  gzip_http_version 1.1;\n  gzip_disable      \"MSIE [1-6]\\.\";\n  gzip_min_length   256;\n  gzip_vary         on;\n  gzip_proxied      expired no-cache no-store private auth;\n  gzip_types        text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;\n  gzip_comp_level   9;\n\n  root /usr/share/nginx/html;\n\n  location / {\n    try_files $uri $uri/ /index.html =404;\n  }\n}
\n

This setup handles the only HTTP and serves our index.html.\nYou only need to change server_name property value to your own url address.\nAfter that, you only have to run it:

\n
$ docker-compose up -d
\n

You’ll see Docker output regarding building our application with whole steps:

\n
$ docker-compose up -d\nBuilding client\nStep 1/10 : FROM node:carbon-alpine as builder\n ---> df48b68da02a\nStep 2/10 : RUN mkdir /opt/app\n\n...\n\nSuccessfully built 0977583c3825\nSuccessfully tagged docker-spa-setup_client:latest\nStarting docker-spa-setup_client_1 ... done
\n

Now, you could check your site locally entering localhost:{NGINX_PORT} and officially say hello my production app! Whoooa!

\n

Extras

\n

I hope this post will help you to understand how multi-stage build works and how you could use it to improve your SPA app (not that it won’t work perfectly well for API too, but it’s probably a topic for another post probably).\nYou could find a working code on my GitHub, so don’t hesitate to check it if you’ll force some troubles with this guide or ask me some questions here or on my Twitter, I will try to help you. :)

\n

I also leave here some helpful links (some basics and some advanced a bit, used to create this article and also mentioned above), but to be honest, the best way to learn Docker, is diggin’ into it and checking their documentation, which is so great!

\n\n

Good luck!

","frontmatter":{"title":"Dev & prod ready Docker setup for SPA app","subTitle":"Simple and light env setup to run SPA apps on various configurations with Docker multi-stage build","postAuthor":"Marcin Łesek (@marcinlesek)","cover":"/img/docker.png"}},"tags":{"group":[{"name":"$OSTYPE","totalCount":1,"edges":[{"node":{"fields":{"slug":"/cross-system-xdebug-docker-compose-setup/"}}}]},{"name":".env","totalCount":1,"edges":[{"node":{"fields":{"slug":"/cross-system-xdebug-docker-compose-setup/"}}}]},{"name":".nvrmc","totalCount":1,"edges":[{"node":{"fields":{"slug":"/travis-problematic-python-and-node/"}}}]},{"name":"AUTO_INCREMENT","totalCount":1,"edges":[{"node":{"fields":{"slug":"/is-mysql-autoincrement-really-monotonic/"}}}]},{"name":"Angular","totalCount":1,"edges":[{"node":{"fields":{"slug":"/Dev-and-prod-ready-Docker-setup-for-SPA-app/"}}}]},{"name":"Command","totalCount":1,"edges":[{"node":{"fields":{"slug":"/complex-command-handler-in-javascript/"}}}]},{"name":"DQL","totalCount":2,"edges":[{"node":{"fields":{"slug":"/doctrine-new-dql-operator-and-objects/"}}},{"node":{"fields":{"slug":"/mysql-decimal-format/"}}}]},{"name":"Data Transfer Object","totalCount":1,"edges":[{"node":{"fields":{"slug":"/doctrine-new-dql-operator-and-objects/"}}}]},{"name":"Docker","totalCount":3,"edges":[{"node":{"fields":{"slug":"/cross-system-xdebug-docker-compose-setup/"}}},{"node":{"fields":{"slug":"/quick-import-of-mysql-database-dump/"}}},{"node":{"fields":{"slug":"/Dev-and-prod-ready-Docker-setup-for-SPA-app/"}}}]},{"name":"Docker Compose","totalCount":3,"edges":[{"node":{"fields":{"slug":"/cross-system-xdebug-docker-compose-setup/"}}},{"node":{"fields":{"slug":"/quick-import-of-mysql-database-dump/"}}},{"node":{"fields":{"slug":"/Dev-and-prod-ready-Docker-setup-for-SPA-app/"}}}]},{"name":"Doctrine","totalCount":2,"edges":[{"node":{"fields":{"slug":"/doctrine-new-dql-operator-and-objects/"}}},{"node":{"fields":{"slug":"/mysql-decimal-format/"}}}]},{"name":"Doctrine NEW","totalCount":1,"edges":[{"node":{"fields":{"slug":"/doctrine-new-dql-operator-and-objects/"}}}]},{"name":"ES7","totalCount":1,"edges":[{"node":{"fields":{"slug":"/async-await-with-express/"}}}]},{"name":"Elastica","totalCount":1,"edges":[{"node":{"fields":{"slug":"/elasticsearch-script-unknown-field-source-parser-not-found/"}}}]},{"name":"Elasticsearch","totalCount":1,"edges":[{"node":{"fields":{"slug":"/elasticsearch-script-unknown-field-source-parser-not-found/"}}}]},{"name":"Elasticsearch script","totalCount":1,"edges":[{"node":{"fields":{"slug":"/elasticsearch-script-unknown-field-source-parser-not-found/"}}}]},{"name":"Express","totalCount":1,"edges":[{"node":{"fields":{"slug":"/async-await-with-express/"}}}]},{"name":"Git","totalCount":2,"edges":[{"node":{"fields":{"slug":"/git-not-detecting-renames-quick-workarounds/"}}},{"node":{"fields":{"slug":"/git-reverting-branch-removal/"}}}]},{"name":"Git renamed","totalCount":1,"edges":[{"node":{"fields":{"slug":"/git-not-detecting-renames-quick-workarounds/"}}}]},{"name":"HTTP","totalCount":1,"edges":[{"node":{"fields":{"slug":"/how-does-slack-communicate-with-spotify/"}}}]},{"name":"JavaScript","totalCount":3,"edges":[{"node":{"fields":{"slug":"/async-await-with-express/"}}},{"node":{"fields":{"slug":"/complex-command-handler-in-javascript/"}}},{"node":{"fields":{"slug":"/how-to-implement-redux-in-react/"}}}]},{"name":"Kafka","totalCount":1,"edges":[{"node":{"fields":{"slug":"/is-mysql-autoincrement-really-monotonic/"}}}]},{"name":"MySQL","totalCount":4,"edges":[{"node":{"fields":{"slug":"/mysql-decimal-format/"}}},{"node":{"fields":{"slug":"/is-mysql-autoincrement-really-monotonic/"}}},{"node":{"fields":{"slug":"/php-with-mysql-8/"}}},{"node":{"fields":{"slug":"/quick-import-of-mysql-database-dump/"}}}]},{"name":"MySQL 8","totalCount":1,"edges":[{"node":{"fields":{"slug":"/php-with-mysql-8/"}}}]},{"name":"Node.js","totalCount":1,"edges":[{"node":{"fields":{"slug":"/travis-problematic-python-and-node/"}}}]},{"name":"ORM","totalCount":1,"edges":[{"node":{"fields":{"slug":"/doctrine-new-dql-operator-and-objects/"}}}]},{"name":"PDO","totalCount":1,"edges":[{"node":{"fields":{"slug":"/php-with-mysql-8/"}}}]},{"name":"PDO_MYSQL","totalCount":1,"edges":[{"node":{"fields":{"slug":"/php-with-mysql-8/"}}}]},{"name":"PHP","totalCount":6,"edges":[{"node":{"fields":{"slug":"/doctrine-new-dql-operator-and-objects/"}}},{"node":{"fields":{"slug":"/mysql-decimal-format/"}}},{"node":{"fields":{"slug":"/cross-system-xdebug-docker-compose-setup/"}}},{"node":{"fields":{"slug":"/php-with-mysql-8/"}}},{"node":{"fields":{"slug":"/elasticsearch-script-unknown-field-source-parser-not-found/"}}},{"node":{"fields":{"slug":"/how-to-write-a-phing-target-autocomplete-bash-script/"}}}]},{"name":"Phing","totalCount":1,"edges":[{"node":{"fields":{"slug":"/how-to-write-a-phing-target-autocomplete-bash-script/"}}}]},{"name":"Promise","totalCount":1,"edges":[{"node":{"fields":{"slug":"/complex-command-handler-in-javascript/"}}}]},{"name":"Python","totalCount":1,"edges":[{"node":{"fields":{"slug":"/travis-problematic-python-and-node/"}}}]},{"name":"React","totalCount":2,"edges":[{"node":{"fields":{"slug":"/how-to-implement-redux-in-react/"}}},{"node":{"fields":{"slug":"/Dev-and-prod-ready-Docker-setup-for-SPA-app/"}}}]},{"name":"Redux","totalCount":1,"edges":[{"node":{"fields":{"slug":"/how-to-implement-redux-in-react/"}}}]},{"name":"Redux store","totalCount":1,"edges":[{"node":{"fields":{"slug":"/how-to-implement-redux-in-react/"}}}]},{"name":"SPA","totalCount":1,"edges":[{"node":{"fields":{"slug":"/Dev-and-prod-ready-Docker-setup-for-SPA-app/"}}}]},{"name":"Slack","totalCount":1,"edges":[{"node":{"fields":{"slug":"/how-does-slack-communicate-with-spotify/"}}}]},{"name":"Spotify","totalCount":1,"edges":[{"node":{"fields":{"slug":"/how-does-slack-communicate-with-spotify/"}}}]},{"name":"Travis","totalCount":2,"edges":[{"node":{"fields":{"slug":"/travis-problematic-python-and-node/"}}},{"node":{"fields":{"slug":"/elasticsearch-script-unknown-field-source-parser-not-found/"}}}]},{"name":"Vue","totalCount":1,"edges":[{"node":{"fields":{"slug":"/Dev-and-prod-ready-Docker-setup-for-SPA-app/"}}}]},{"name":"XDEBUG_CONFIG","totalCount":1,"edges":[{"node":{"fields":{"slug":"/cross-system-xdebug-docker-compose-setup/"}}}]},{"name":"XDebug","totalCount":1,"edges":[{"node":{"fields":{"slug":"/cross-system-xdebug-docker-compose-setup/"}}}]},{"name":"ai","totalCount":1,"edges":[{"node":{"fields":{"slug":"/weekly-ai-bites-last-manual-gap-qa-testing/"}}}]},{"name":"amazon","totalCount":1,"edges":[{"node":{"fields":{"slug":"/minio-as-s3-replacement-in-development-and-beyond/"}}}]},{"name":"apple-watch","totalCount":1,"edges":[{"node":{"fields":{"slug":"/aws-cognito-without-library/"}}}]},{"name":"asp.net core","totalCount":1,"edges":[{"node":{"fields":{"slug":"/net-in-my-browser/"}}}]},{"name":"async","totalCount":2,"edges":[{"node":{"fields":{"slug":"/async-await-with-express/"}}},{"node":{"fields":{"slug":"/complex-command-handler-in-javascript/"}}}]},{"name":"autocomplete","totalCount":1,"edges":[{"node":{"fields":{"slug":"/how-to-write-a-phing-target-autocomplete-bash-script/"}}}]},{"name":"await","totalCount":2,"edges":[{"node":{"fields":{"slug":"/async-await-with-express/"}}},{"node":{"fields":{"slug":"/complex-command-handler-in-javascript/"}}}]},{"name":"aws","totalCount":3,"edges":[{"node":{"fields":{"slug":"/minio-as-s3-replacement-in-development-and-beyond/"}}},{"node":{"fields":{"slug":"/time-out-of-sync-in-aws-ec2/"}}},{"node":{"fields":{"slug":"/aws-cognito-without-library/"}}}]},{"name":"aws.cli","totalCount":1,"edges":[{"node":{"fields":{"slug":"/travis-problematic-python-and-node/"}}}]},{"name":"bash","totalCount":2,"edges":[{"node":{"fields":{"slug":"/cross-system-xdebug-docker-compose-setup/"}}},{"node":{"fields":{"slug":"/how-to-write-a-phing-target-autocomplete-bash-script/"}}}]},{"name":"bitbucket","totalCount":1,"edges":[{"node":{"fields":{"slug":"/how-to-quickly-remove-merged-remote-branches/"}}}]},{"name":"blazor","totalCount":1,"edges":[{"node":{"fields":{"slug":"/net-in-my-browser/"}}}]},{"name":"build","totalCount":1,"edges":[{"node":{"fields":{"slug":"/Dev-and-prod-ready-Docker-setup-for-SPA-app/"}}}]},{"name":"builder pattern","totalCount":1,"edges":[{"node":{"fields":{"slug":"/make-jaxb-great-again/"}}}]},{"name":"c#","totalCount":1,"edges":[{"node":{"fields":{"slug":"/net-in-my-browser/"}}}]},{"name":"ci","totalCount":1,"edges":[{"node":{"fields":{"slug":"/unresolved-check-from-travis-on-github-pull-request/"}}}]},{"name":"claude-code","totalCount":1,"edges":[{"node":{"fields":{"slug":"/weekly-ai-bites-last-manual-gap-qa-testing/"}}}]},{"name":"cognito","totalCount":1,"edges":[{"node":{"fields":{"slug":"/aws-cognito-without-library/"}}}]},{"name":"colors","totalCount":1,"edges":[{"node":{"fields":{"slug":"/naming-sass-color-variables/"}}}]},{"name":"continuous integration","totalCount":1,"edges":[{"node":{"fields":{"slug":"/unresolved-check-from-travis-on-github-pull-request/"}}}]},{"name":"decimal","totalCount":1,"edges":[{"node":{"fields":{"slug":"/mysql-decimal-format/"}}}]},{"name":"docker","totalCount":1,"edges":[{"node":{"fields":{"slug":"/minio-as-s3-replacement-in-development-and-beyond/"}}}]},{"name":"ec2","totalCount":1,"edges":[{"node":{"fields":{"slug":"/time-out-of-sync-in-aws-ec2/"}}}]},{"name":"environment","totalCount":1,"edges":[{"node":{"fields":{"slug":"/Dev-and-prod-ready-Docker-setup-for-SPA-app/"}}}]},{"name":"equals","totalCount":1,"edges":[{"node":{"fields":{"slug":"/jpa-and-uuid/"}}}]},{"name":"flysystem","totalCount":1,"edges":[{"node":{"fields":{"slug":"/minio-as-s3-replacement-in-development-and-beyond/"}}}]},{"name":"front-end","totalCount":1,"edges":[{"node":{"fields":{"slug":"/net-in-my-browser/"}}}]},{"name":"git","totalCount":1,"edges":[{"node":{"fields":{"slug":"/how-to-quickly-remove-merged-remote-branches/"}}}]},{"name":"git commit","totalCount":1,"edges":[{"node":{"fields":{"slug":"/git-not-detecting-renames-quick-workarounds/"}}}]},{"name":"git reflog","totalCount":1,"edges":[{"node":{"fields":{"slug":"/git-reverting-branch-removal/"}}}]},{"name":"git status","totalCount":1,"edges":[{"node":{"fields":{"slug":"/git-not-detecting-renames-quick-workarounds/"}}}]},{"name":"github","totalCount":3,"edges":[{"node":{"fields":{"slug":"/pull-request-templates-on-github/"}}},{"node":{"fields":{"slug":"/unresolved-check-from-travis-on-github-pull-request/"}}},{"node":{"fields":{"slug":"/how-to-quickly-remove-merged-remote-branches/"}}}]},{"name":"guide","totalCount":1,"edges":[{"node":{"fields":{"slug":"/Dev-and-prod-ready-Docker-setup-for-SPA-app/"}}}]},{"name":"hashcode","totalCount":1,"edges":[{"node":{"fields":{"slug":"/jpa-and-uuid/"}}}]},{"name":"hibernate","totalCount":1,"edges":[{"node":{"fields":{"slug":"/jpa-and-uuid/"}}}]},{"name":"java","totalCount":2,"edges":[{"node":{"fields":{"slug":"/make-jaxb-great-again/"}}},{"node":{"fields":{"slug":"/jpa-and-uuid/"}}}]},{"name":"java.time","totalCount":1,"edges":[{"node":{"fields":{"slug":"/make-jaxb-great-again/"}}}]},{"name":"jaxb","totalCount":1,"edges":[{"node":{"fields":{"slug":"/make-jaxb-great-again/"}}}]},{"name":"jdk8","totalCount":1,"edges":[{"node":{"fields":{"slug":"/make-jaxb-great-again/"}}}]},{"name":"jpa","totalCount":1,"edges":[{"node":{"fields":{"slug":"/jpa-and-uuid/"}}}]},{"name":"maven","totalCount":1,"edges":[{"node":{"fields":{"slug":"/make-jaxb-great-again/"}}}]},{"name":"middleware","totalCount":1,"edges":[{"node":{"fields":{"slug":"/how-to-implement-redux-in-react/"}}}]},{"name":"mono","totalCount":1,"edges":[{"node":{"fields":{"slug":"/net-in-my-browser/"}}}]},{"name":"multi-stage","totalCount":1,"edges":[{"node":{"fields":{"slug":"/Dev-and-prod-ready-Docker-setup-for-SPA-app/"}}}]},{"name":"naming","totalCount":1,"edges":[{"node":{"fields":{"slug":"/naming-sass-color-variables/"}}}]},{"name":"networking","totalCount":1,"edges":[{"node":{"fields":{"slug":"/time-out-of-sync-in-aws-ec2/"}}}]},{"name":"ntp","totalCount":1,"edges":[{"node":{"fields":{"slug":"/time-out-of-sync-in-aws-ec2/"}}}]},{"name":"nvm","totalCount":1,"edges":[{"node":{"fields":{"slug":"/travis-problematic-python-and-node/"}}}]},{"name":"persistence","totalCount":1,"edges":[{"node":{"fields":{"slug":"/jpa-and-uuid/"}}}]},{"name":"port 4381","totalCount":1,"edges":[{"node":{"fields":{"slug":"/how-does-slack-communicate-with-spotify/"}}}]},{"name":"pr","totalCount":1,"edges":[{"node":{"fields":{"slug":"/pull-request-templates-on-github/"}}}]},{"name":"production","totalCount":1,"edges":[{"node":{"fields":{"slug":"/Dev-and-prod-ready-Docker-setup-for-SPA-app/"}}}]},{"name":"project","totalCount":1,"edges":[{"node":{"fields":{"slug":"/pull-request-templates-on-github/"}}}]},{"name":"pull","totalCount":1,"edges":[{"node":{"fields":{"slug":"/pull-request-templates-on-github/"}}}]},{"name":"qa","totalCount":1,"edges":[{"node":{"fields":{"slug":"/weekly-ai-bites-last-manual-gap-qa-testing/"}}}]},{"name":"razor","totalCount":1,"edges":[{"node":{"fields":{"slug":"/net-in-my-browser/"}}}]},{"name":"reducer","totalCount":1,"edges":[{"node":{"fields":{"slug":"/how-to-implement-redux-in-react/"}}}]},{"name":"regex","totalCount":1,"edges":[{"node":{"fields":{"slug":"/how-to-write-a-phing-target-autocomplete-bash-script/"}}}]},{"name":"repo","totalCount":1,"edges":[{"node":{"fields":{"slug":"/how-to-quickly-remove-merged-remote-branches/"}}}]},{"name":"repository","totalCount":1,"edges":[{"node":{"fields":{"slug":"/how-to-quickly-remove-merged-remote-branches/"}}}]},{"name":"s3","totalCount":1,"edges":[{"node":{"fields":{"slug":"/minio-as-s3-replacement-in-development-and-beyond/"}}}]},{"name":"sass","totalCount":1,"edges":[{"node":{"fields":{"slug":"/naming-sass-color-variables/"}}}]},{"name":"setup","totalCount":1,"edges":[{"node":{"fields":{"slug":"/Dev-and-prod-ready-Docker-setup-for-SPA-app/"}}}]},{"name":"skills","totalCount":1,"edges":[{"node":{"fields":{"slug":"/weekly-ai-bites-last-manual-gap-qa-testing/"}}}]},{"name":"styles","totalCount":1,"edges":[{"node":{"fields":{"slug":"/naming-sass-color-variables/"}}}]},{"name":"symfony","totalCount":1,"edges":[{"node":{"fields":{"slug":"/minio-as-s3-replacement-in-development-and-beyond/"}}}]},{"name":"templates","totalCount":1,"edges":[{"node":{"fields":{"slug":"/pull-request-templates-on-github/"}}}]},{"name":"test-automation","totalCount":1,"edges":[{"node":{"fields":{"slug":"/weekly-ai-bites-last-manual-gap-qa-testing/"}}}]},{"name":"transaction","totalCount":1,"edges":[{"node":{"fields":{"slug":"/is-mysql-autoincrement-really-monotonic/"}}}]},{"name":"travis","totalCount":1,"edges":[{"node":{"fields":{"slug":"/unresolved-check-from-travis-on-github-pull-request/"}}}]},{"name":"tutorial","totalCount":2,"edges":[{"node":{"fields":{"slug":"/how-to-implement-redux-in-react/"}}},{"node":{"fields":{"slug":"/Dev-and-prod-ready-Docker-setup-for-SPA-app/"}}}]},{"name":"ubuntu","totalCount":1,"edges":[{"node":{"fields":{"slug":"/time-out-of-sync-in-aws-ec2/"}}}]},{"name":"unsupported","totalCount":1,"edges":[{"node":{"fields":{"slug":"/aws-cognito-without-library/"}}}]},{"name":"uuid","totalCount":1,"edges":[{"node":{"fields":{"slug":"/jpa-and-uuid/"}}}]},{"name":"variables","totalCount":1,"edges":[{"node":{"fields":{"slug":"/naming-sass-color-variables/"}}}]},{"name":"wasm","totalCount":1,"edges":[{"node":{"fields":{"slug":"/net-in-my-browser/"}}}]},{"name":"watchos","totalCount":1,"edges":[{"node":{"fields":{"slug":"/aws-cognito-without-library/"}}}]},{"name":"web","totalCount":1,"edges":[{"node":{"fields":{"slug":"/net-in-my-browser/"}}}]}]},"author":{"id":"37bda159-ff45-50c9-aeba-18326b7ca66b","childMarkdownRemark":{"html":"

XSolve We are Agile Software House focused on PHP/Symfony, #JavaScript, #Java and #Mobile (iOS, Android, Windows Phone) #Inc5000 European company in 2018.\n
\nxsolve.software

"}},"footnote":{"id":"b4474c9b-7be6-5f34-866a-cdfffa885bce","childMarkdownRemark":{"html":""}},"site":{"siteMetadata":{"facebook":{"appId":""}}}},"pageContext":{"slug":"/Dev-and-prod-ready-Docker-setup-for-SPA-app/"}}