Wordpress and PhpMyAdmin inside Docker container

Let's see how to run WordPress and PHPMyAdmin inside a Docker container.
Part of the Docker for web developers course.

We will first create an environment file. Its purpose will be to save sensitive credentials data:
.env

MYSQL_ROOT_PASSWORD=mysql_root
MYSQL_ROOT=wp_user
MYSQL_PASSWORD=wp_password

Now it is time for the docker-compose.yml file where we will be describing our containers(services):

version: '3.3'

services:
  db:
      image: mysql:latest
      env_file: .env
      environment:
        - MYSQL_DATABASE=wordpress
      volumes:
          - dbdata:/var/lib/mysql
      command: --default-authentication-plugin=mysql_native_password

  wordpress:
    depends_on:
      - db
    image: wordpress:latest
    env_file: . env
    environment:
      - WORDPRESS_DB_HOST=db
      - WORDPRESS_DB_USER=$MYSQL_USER
      - WORDPRESS_DB_PASSWORD=$MYSQL_PASSWORD
      - WORDPRESS_DB_NAME=wordpress
    volumes:
      - wordpress:/var/www/html
    ports:
      - "80:80"
   
  phpmyadmin:
    depends_on:
      - db
    image: phpmyadmin/phpmyadmin:latest
    env_file: .env
    environment:
      PMA_HOST: db
      MYSQL_ROOT_PASSWORD: $MYSQL_ROOT_PASSWORD
    ports:
       - 3333:80

  volumes:
    wordpress:
    dbdata:

Then you can launch: docker-compose up This will create networks between containers, volumes (to store persistent data), will pull images, configure them in order to create and run the containers.
We will be bringing up MySQL, PHPMyAdmin, and docker containers(services).

You'll need to wait a bit until everything is initialized and then you can browse:
http://127.0.0.1:80 for WordPress
as well as
http://127.0.0.1:3333 for PHPMyAdmin. Please note that for the PHPMyAdmin we need to use user: root, and password: mysql_root

Congratulations and enjoy learning !

Install and configure Webpack

Why use Webpack?
part of the course: JavaScript for beginners - learn by doing

• to auto minimize, compile and transpile your modern ES6 and above version of JavaScript
• to auto-reload your browser
• to auto-include and merge external JavaScript files into one
• and many more...

In this tutorial, we will focus on those three. First, download and install NodeJS, because we will need npm (node package manager) included in the NodeJS installation.
If you would like you can watch the video:

Prerequisites:
Have two files: index.html and main.js Inside index.html include index.html include
Inside main.js you can place any JavaScript code.

We will start by creating our first project. Why? - again to be able to have a portable version of our code which can other developers run in their machines. The project information will be stored inside the project.json file.
just type: npm init and follow the questions. Next, we will install webpack with:
npm install --save-dev webpack
Open project.json and you will see section devDependencies with the webpack inside. All upcoming package installations or so-called dependencies will have their place in our package.json file. As you can see --save-dev option is just installing the packages for development mode in the devDependencies section -  this means that we can have production and development dependencies and they can differ - which is nice because you would like to include in your production/live application only the needed libraries.
You can also see now that there is directory /node_modules/ - well there all downloaded and installed packages and their dependent packages will be placed.
Upon compilation / transpiling only part of those (certain functions) will be used and have their place in the final development or production project.
By the way, if other users have your files (excluding /node_modules/ which is heavy in KB) they just need to run npm install and they will have all the modules installed automatically based on your package.json file.
We need to install webpack-cli. Please do so with npm
And now we need to modify the "scripts" section of package.json to:
"scripts":{
    "build":"webpack"
}
Then just type npm run build and this will start webpack.
Create folder: /src and place inside index.html and main.js.
Inside package.json replace main.js to index.js.
Rename main.js as index.js ->this is needed as an entry point index.js
Now run again: npm run build and you will see a new directory: /dist This is newly created by webpack and is where the production code resides. So you can browse it via: http://project_directory/dist directly in your browser.

Next, we need a plugin that will minify and load/import directly our JavaScript into the HTML. We will use: html-webpack-plugin and html-loader. Do npm install them!
Now is time to create the webpack.config.js file with the following content:

const htmlplugin = require("html-webpack-plugin");
module.exports = {
module: {
 rules: [
{
   test:/\.html$/,
   use:[  { loader:"html-loader",   options: {minimize:true} }  ]
}
]
},
plugins:[
    new htmlplugin(       {  template:"./src/index.html",filename:"./index.html"} )
]
}

Then npm run build.
And you can see that index.html is modified (inside the /dist folder). From /src/index.html you can now remove the line (npm will auto-include it for us).
You can test the code from /dist directory - now everything works !

Lets apply Babel to be able to use ES6 on a wide range of browsers !
npm i --save-dev babel-loader @babel.core @babel/preset-env
create .babelrc file and place there:

{
 "presets":[ "@babel/present-env" ]
}
Now add babel to webpack.config.js
{
 test: /\.js$/, exclude:/node_modules/,
 use[{loader:"babel-loader"}]
}

Type again npm build and you can see that the project now transpiles ES6 into ES5 !

Let's do some live code reloading:
npm i --save-dev webpack-dev-server
then in package.json:
place new line inside of scripts:
"dev":"webpack-dev-server"
Now: npm run dev
Load up your website and then modify something inside of your JavaScript file.
You will see how the browser auto-reloads and you can see your changes!

Congratulations and enjoy learning!