www-root and write folder

—

### **1. www-root**
– **Definition:** The `www-root` (or "web root") is the directory on a web server where public web files are stored. These files are accessible via a browser.
– **Common Path Examples:**
– **Linux:** `/var/www/html`
– **Windows IIS:** `C:inetpubwwwroot`
– **Docker:** Often mapped to a folder like `/var/www` inside the container.
– Your Laravel project typically uses the `public` folder as the `www-root`.

– **Best Practices:**
– Only expose files that are meant to be public (e.g., JavaScript, CSS, images, and `index.php` for Laravel).
– Place application code (e.g., controllers, models) **outside** the `www-root` to secure it from direct access.

—

### **2. Write Folder**
– **Definition:** A "write folder" is a directory where the web application (e.g., Laravel, WordPress) has permission to write files. These are usually used for:
– Caching (e.g., Laravel’s `storage/framework/cache`)
– Logs (e.g., `storage/logs`)
– Temporary file uploads
– Media (e.g., WordPress `wp-content/uploads`)

– **Examples in Laravel:**
– **Write Folders:**
– `storage/`
– `bootstrap/cache/`
– Ensure these are writable by the web server user (e.g., `www-data` or `apache`).

– **Permission Best Practices:**
– Set the correct **ownership** for the web server user:

sudo chown -R www-data:www-data /path/to/your/write-folder

– Use **secure permissions:**

sudo chmod -R 755 /path/to/your/write-folder # Folders
    sudo chmod -R 644 /path/to/your/write-folder/* # Files

– For Laravel:

sudo chmod -R 775 storage bootstrap/cache

—

### **Tips for Securing www-root and Write Folders**
– **www-root:**
– Use `.htaccess` or equivalent server rules to restrict access to sensitive files.
– Example `.htaccess` for Laravel:

<IfModule mod_rewrite.c>
        RewriteEngine On
        RewriteCond %{REQUEST_FILENAME} !-f
        RewriteCond %{REQUEST_FILENAME} !-d
        RewriteRule ^ index.php [L]
    </IfModule>

– **Write Folder:**
– Avoid setting `777` permissions unless absolutely necessary.
– Regularly monitor for malicious files in writable directories.
– For Laravel: Ensure `.env` and `storage/logs` are not publicly accessible.

Let me know if you need further assistance setting these up!

—

### **1. Access the MySQL Container**
Run the following command to access the MySQL container's shell:

docker exec -it <container_name> mysql -u root -p

– Replace “ with the name of your MySQL container.
– Enter the root password when prompted (defined in your `docker-compose.yml` or `docker run` command).

—

### **2. Create a New User**
Run the following SQL commands to create a new MySQL user:

CREATE USER 'new_user'@'%' IDENTIFIED BY 'password';

– Replace `new_user` with the username you want.
– Replace `password` with a secure password.

—

### **3. Grant All Privileges**
Grant the new user all privileges for all databases and tables:

GRANT ALL PRIVILEGES ON *.* TO 'new_user'@'%';

– `*.*` grants privileges on all databases and tables.
– `@'%'` allows the user to connect from any host. For security, you can restrict it to specific IPs or `localhost`:

GRANT ALL PRIVILEGES ON *.* TO 'new_user'@'localhost';

—

### **4. Apply Privileges**
Run the following to reload the privilege tables:

FLUSH PRIVILEGES;

—

### **5. Verify the User**
To check if the user was created successfully, you can run:

SELECT user, host FROM mysql.user;

—

### **Automate with Docker Configuration**

If you want to create the user during container initialization, you can use a custom `init.sql` script.

1. Create a file named `init.sql` with the following content:

CREATE USER 'new_user'@'%' IDENTIFIED BY 'password';
   GRANT ALL PRIVILEGES ON *.* TO 'new_user'@'%';
   FLUSH PRIVILEGES;

2. Mount the script into the container in your `docker-compose.yml`:

services:
     db:
       image: mysql:8
       environment:
         MYSQL_ROOT_PASSWORD: rootpassword
       volumes:
         - ./init.sql:/docker-entrypoint-initdb.d/init.sql

When the container starts, MySQL will execute the script automatically.

—

Let me know if you encounter any issues!

—

### **1. Set Up Angular**
First, create an Angular project if you don’t already have one:

npx @angular/cli new my-angular-app

– This creates a new Angular project in the `my-angular-app` directory.

—

### **2. Build the Angular Project**
Generate the production-ready build of the Angular app:

cd my-angular-app
ng build --output-path=dist --base-href="/wp-content/themes/your-theme/angular/"

– Replace `your-theme` with your WordPress theme directory name.
– The built files will be located in `my-angular-app/dist/`.

—

### **3. Add Angular Files to WordPress Theme**
1. Copy the contents of the `dist/` directory into your theme folder, e.g., `wp-content/themes/your-theme/angular/`.
2. Your folder structure should look like this:

wp-content/
     themes/
       your-theme/
         angular/
           index.html
           main.js
           runtime.js
           polyfills.js
           ...

—

### **4. Enqueue Angular Scripts in WordPress**
Edit your theme's `functions.php` to enqueue the Angular scripts:

function enqueue_angular_app() {
    // Define Angular build folder path
    $angular_path = get_template_directory_uri() . '/angular/';

    // Enqueue Angular files
    wp_enqueue_script('angular-runtime', $angular_path . 'runtime.js', [], null, true);
    wp_enqueue_script('angular-polyfills', $angular_path . 'polyfills.js', [], null, true);
    wp_enqueue_script('angular-main', $angular_path . 'main.js', [], null, true);

    // Add Angular styles if available
    if (file_exists(get_template_directory() . '/angular/styles.css')) {
        wp_enqueue_style('angular-styles', $angular_path . 'styles.css', [], null);
    }
}
add_action('wp_enqueue_scripts', 'enqueue_angular_app');

—

### **5. Add an Angular Entry Point in a WordPress Template**
You need a container element in your WordPress template for Angular to bootstrap. For example, in `index.php` or `page.php`, add:

<div id="angular-app"></div>

—

### **6. Modify Angular's `index.html`**
Angular’s `index.html` file is not used as-is in WordPress. Instead:
1. Open `index.html` from the Angular `dist` folder.
2. Copy the “ tags and “ tags for styles.
3. The scripts are already enqueued in `functions.php`, so you can ignore them.
4. Use the “ tag to match the `id` or container where Angular should load:

<app-root></app-root>

—

### **7. Route Handling**
Angular will handle routing internally, but WordPress may interfere with Angular routes. To prevent WordPress from overriding Angular routes, add a `.htaccess` rule:

RewriteEngine On
RewriteBase /
RewriteRule ^angular/(.*)$ /wp-content/themes/your-theme/angular/index.html [L]

This ensures Angular routes work without WordPress intercepting them.

—

### **8. Verify the Integration**
1. Open your WordPress site.
2. Navigate to the page or template where you added “.
3. Check the browser console for any errors and verify that the Angular app loads.

—

### **Optional: Integrate Angular with WordPress Data**
If you want Angular to interact with WordPress data, use the WordPress REST API:

1. Use Angular's `HttpClient` module to fetch data from the REST API:

import { HttpClient } from '@angular/common/http';

   constructor(private http: HttpClient) {}

   this.http.get('https://your-site.com/wp-json/wp/v2/posts').subscribe(data => {
       console.log(data);
   });

2. Ensure `wp-json` endpoints are publicly accessible for your Angular app.

—

Let me know if you need help with a specific part!

services:
nginx:
image: nginx:latest
container_name: nt-nginx
ports:
– "1702:81"
networks:
– nt-app-network
volumes:
– ./nginx:/etc/nginx/conf.d
– ./applications/bedrock:/var/www/bedrock
depends_on:
– php

php:
build:
context: ./php
container_name: nt-php
volumes:
– ./applications/bedrock:/var/www/bedrock
expose:
– "9000"
working_dir: /var/www
networks:
– nt-app-network

ntmysql:
image: mysql:8.0
container_name: nt-mysql
environment:
MYSQL_ROOT_PASSWORD: rootpassword
MYSQL_DATABASE: site_db
MYSQL_USER: user
MYSQL_PASSWORD: userpassword
volumes:
– ./mysql/data:/var/lib/mysql
ports:
– "3312:3306"
networks:
– nt-app-network

adminer:
image: adminer
container_name: nt-adminer
restart: always
ports:
– '1701:8080'
networks:
– nt-app-network
depends_on:
– ntmysql

networks:
nt-app-network:
driver: bridge
run angular in above

—

### **Updated `docker-compose.yml`**

version: '3.3'

services:
  nginx:
    image: nginx:latest
    container_name: nt-nginx
    ports:
      - "1702:81"
    networks:
      - nt-app-network
    volumes:
      - ./nginx:/etc/nginx/conf.d
      - ./applications/bedrock:/var/www/bedrock
    depends_on:
      - php
      - angular

  php:
    build:
      context: ./php
    container_name: nt-php
    volumes:
      - ./applications/bedrock:/var/www/bedrock
    expose:
      - "9000"
    working_dir: /var/www
    networks:
      - nt-app-network

  ntmysql:
    image: mysql:8.0
    container_name: nt-mysql
    environment:
      MYSQL_ROOT_PASSWORD: rootpassword
      MYSQL_DATABASE: site_db
      MYSQL_USER: user
      MYSQL_PASSWORD: userpassword
    volumes:
      - ./mysql/data:/var/lib/mysql
    ports:
      - "3312:3306"
    networks:
      - nt-app-network

  adminer:
    image: adminer
    container_name: nt-adminer
    restart: always
    ports:
      - '1701:8080'
    networks:
      - nt-app-network
    depends_on:
      - ntmysql

  angular:
    image: node:16
    container_name: nt-angular
    working_dir: /usr/src/angular
    volumes:
      - ./angular:/usr/src/angular
    ports:
      - "4200:4200"
    command: bash -c "npm install && npm start"
    networks:
      - nt-app-network

networks:
  nt-app-network:
    driver: bridge

—

### **Steps to Set Up and Run Angular**

#### **1. Folder Structure**
Ensure your project structure looks like this:

root/
├── angular/                # Your Angular app directory
│   ├── src/
│   ├── package.json
│   ├── angular.json
│   └── ...
├── applications/
│   └── bedrock/
├── mysql/
│   └── data/
├── nginx/
│   └── default.conf        # Nginx configuration
└── docker-compose.yml

#### **2. Place Your Angular App**
Place your Angular app code inside the `angular/` directory. If you don't have one, you can generate it using Angular CLI:

npx @angular/cli new angular

#### **3. Update Nginx Configuration**
Update your Nginx configuration (e.g., `nginx/default.conf`) to proxy requests for Angular:

server {
    listen 81;
    server_name localhost;

    location / {
        proxy_pass http://nt-angular:4200;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

    location /bedrock {
        root /var/www;
        index index.php;
    }
}

#### **4. Build and Run the Containers**
Run the following commands to build and start your containers:

docker-compose up --build

#### **5. Access Angular**
– **Angular Development Server:** Open `http://localhost:4200` in your browser.
– **Through Nginx Proxy:** Open `http://localhost:1702`.

—

### **Notes**
– **Development Workflow:** The `npm start` command starts Angular's development server, enabling live reloading. If you need a production build, modify the `command` to:

command: bash -c "npm install && npm run build && npx serve -s dist"

– **Port Conflicts:** Ensure no other service is using ports `4200` or `1702`.

Let me know if you need further assistance!

# Install system dependencies and PHP extensions
RUN apt-get update && apt-get install -y
zip
unzip
git
curl
libpng-dev
libjpeg-dev
libfreetype6-dev
libzip-dev
&& docker-php-ext-install pdo pdo_mysql zip gd mysqli
&& apt-get clean && rm -rf /var/lib/apt/lists/*

# Install Node.js (version 20.x)
RUN curl -fsSL https://deb.nodesource.com/setup_20.x | bash – &&
apt-get install -y nodejs &&
apt-get clean && rm -rf /var/lib/apt/lists/*

RUN curl -o- -L https://yarnpkg.com/install.sh | bash -s — –version 1.22.22 &&
ln -sf /root/.yarn/bin/yarn /usr/local/bin/yarn &&
ln -sf /root/.yarn/bin/yarnpkg /usr/local/bin/yarnpkg

# Verify Yarn installation
RUN yarn –version

# Copy Composer (from official Composer image)
COPY –from=composer:2.7 /usr/bin/composer /usr/bin/composer

# Copy custom php.ini
COPY php.ini /usr/local/etc/php/php.ini

# Set the working directory
WORKDIR /var/www

# Expose PHP-FPM port
EXPOSE 9000

—

### **1. Add Angular to the PHP Container**
1. Place your Angular project in the `angular/` directory under the root of your project structure.

Example folder structure:

root/
   ├── angular/                # Angular app directory
   │   ├── src/
   │   ├── package.json
   │   ├── angular.json
   │   └── ...
   ├── applications/
   │   └── bedrock/
   ├── nginx/
   │   └── default.conf
   ├── php/                    # PHP Docker context
   │   └── Dockerfile
   └── docker-compose.yml

2. Update your `docker-compose.yml` to mount the `angular/` directory inside the PHP container:

php:
     build:
       context: ./php
     container_name: nt-php
     volumes:
       - ./applications/bedrock:/var/www/bedrock
       - ./angular:/var/www/angular  # Mount Angular directory
     expose:
       - "9000"
     working_dir: /var/www
     networks:
       - nt-app-network

—

### **2. Install Angular Dependencies**
After the container is up, access the PHP container:

docker exec -it nt-php bash

Navigate to the Angular directory:

cd /var/www/angular

Install the Angular dependencies:

yarn install

—

### **3. Run the Angular Development Server**
Start the Angular development server:

yarn start --host 0.0.0.0 --port 4200

– The `–host 0.0.0.0` flag ensures the server binds to all network interfaces, making it accessible outside the container.
– The `–port 4200` sets the port for the Angular server.

—

### **4. Update Nginx Configuration**
Configure Nginx to proxy requests to the Angular server. Edit `nginx/default.conf`:

server {
    listen 81;
    server_name localhost;

    # Proxy requests to the Angular development server
    location / {
        proxy_pass http://nt-php:4200;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

    location /bedrock {
        root /var/www;
        index index.php;
    }
}

—

### **5. Access Angular**
1. Rebuild and restart the containers:

docker-compose up --build

2. Open a browser and navigate to:
– **Angular Dev Server:** `http://localhost:4200` (direct access)
– **Nginx Proxy:** `http://localhost:1702` (via Nginx)

—

### **6. Optional: For Production Build**
For a production build, generate a static version of your Angular app and serve it via Nginx.

1. Inside the container, run:

yarn build --output-path=dist --base-href="/"

The build files will be available in `/var/www/angular/dist`.

2. Update Nginx to serve the static Angular files:

location / {
       root /var/www/angular/dist;
       index index.html;
       try_files $uri /index.html;
   }

3. Copy the files to `/var/www/angular/dist` in the PHP container.

4. Reload Nginx:

docker exec nt-nginx nginx -s reload

—

This setup allows you to run Angular inside the PHP container and serves it via Nginx, whether in development or production. Let me know if you need further assistance!

location / {
try_files $uri $uri/ /index.php?$query_string;
}

location ~ .php$ {
include fastcgi_params;
fastcgi_pass php:9000;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
}

error_log /var/log/nginx/site1_error.log;
access_log /var/log/nginx/site1_access.log;
}

—

### **Steps to Add Angular**
We'll configure Nginx to serve Angular for a specific route, such as `/angular`, while keeping the current WordPress setup untouched.

—

### **1. Update Nginx Configuration**

Modify your Nginx configuration to handle Angular requests under a specific path (e.g., `/angular`).

Updated Nginx configuration:

server {
    listen 81;
    server_name localhost;
    root /var/www/bedrock/web;
    index index.php index.html;

    # WordPress Bedrock routes
    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    # PHP handling for WordPress
    location ~ .php$ {
        include fastcgi_params;
        fastcgi_pass php:9000;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    }

    # Angular route
    location /angular/ {
        proxy_pass http://php:4200; # Forward to Angular dev server
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

    # Logs
    error_log  /var/log/nginx/site1_error.log;
    access_log /var/log/nginx/site1_access.log;
}

– The **`location /angular/`** block forwards requests to the Angular development server running inside the PHP container on port `4200`.
– The rest of the configuration remains unchanged for WordPress Bedrock.

—

### **2. Set Up Angular in the PHP Container**

Since you already have Node.js and Yarn installed in the PHP container, follow these steps:

1. **Install Angular Dependencies**:
– Access the PHP container:

docker exec -it nt-php bash

– Navigate to your Angular directory:

cd /var/www/angular

– Install dependencies:

yarn install

2. **Start Angular Development Server**:
– Inside the PHP container:

yarn start --host 0.0.0.0 --port 4200

—

### **3. Access Angular**

– Visit `http://localhost:81/angular/` to access the Angular app through Nginx.
– WordPress will still function as expected at `http://localhost:81`.

—

### **4. Optional: Serve a Production Build**

For production, build Angular and configure Nginx to serve the static files:

1. **Build Angular**:

yarn build --output-path=dist --base-href="/angular/"

2. **Update Nginx Configuration**:
Replace the `/angular/` block with the following:

location /angular/ {
       root /var/www/angular/dist;
       index index.html;
       try_files $uri /index.html;
   }

3. **Copy Build Files**:
Ensure the built files are in `/var/www/angular/dist` inside the PHP container.

4. **Reload Nginx**:

docker exec nt-nginx nginx -s reload

Now, Angular will be served as a static site under `/angular`.

—

This setup keeps your WordPress Bedrock and Angular application isolated but accessible from the same domain and port. Let me know if you encounter any issues!