### Installing WordPressify via NPM - Bash

Source: https://github.com/luangjokaj/wordpressify-documentation/blob/main/src/app/docs/install-wordpressify/page.mdx

This command initializes a new WordPressify project by generating the necessary file structure. It's the recommended method for a quick setup, leveraging `npx` to execute the package directly without global installation. This simplifies the initial project setup significantly.

```bash
npx wordpressify
```

--------------------------------

### Starting WordPressify Development Server (npm) (Bash)

Source: https://github.com/luangjokaj/wordpressify-documentation/blob/main/src/app/docs/start-project/page.mdx

This Bash command initiates the local development server for the WordPressify project using `npm run start`. It's the standard method to begin the development workflow when Node.js is installed locally.

```bash
npm run start
```

--------------------------------

### Initializing a New WordPressify Project (Shell)

Source: https://github.com/luangjokaj/wordpressify-documentation/blob/main/src/app/docs/snippets/demo.mdx

This command initializes a new WordPressify project by generating the necessary file structure. It uses `npx` to execute the `wordpressify` package without global installation, ensuring the latest version is used. This is the first step to set up a new project.

```Shell
npx wordpressify
```

--------------------------------

### Starting WordPressify Development Environment (Shell)

Source: https://github.com/luangjokaj/wordpressify-documentation/blob/main/src/app/docs/snippets/demo.mdx

This command starts the local development server for the WordPressify project. It typically watches for file changes, compiles assets, and provides a live-reloading experience. This command is used during active development.

```Shell
npm run start
```

--------------------------------

### Starting WordPressify Development Server (Docker) (Bash)

Source: https://github.com/luangjokaj/wordpressify-documentation/blob/main/src/app/docs/start-project/page.mdx

This Bash command starts the WordPressify development environment using `docker compose up`. It's the preferred method when Node.js is not installed locally, ensuring all project services run within Docker containers.

```bash
docker compose up
```

--------------------------------

### Rebuilding WordPressify Environment (npm) (Bash)

Source: https://github.com/luangjokaj/wordpressify-documentation/blob/main/src/app/docs/start-project/page.mdx

This Bash command rebuilds the WordPressify environment, performing a fresh installation and cleaning the database. It's useful for resetting the development setup to a clean state.

```bash
npm run rebuild
```

--------------------------------

### Structuring Documentation Navigation with Grid and Box Components - JSX

Source: https://github.com/luangjokaj/wordpressify-documentation/blob/main/src/app/docs/page.mdx

This JSX snippet demonstrates how to structure navigation links within the documentation using Grid and Box components. It arranges two clickable boxes, 'Install Docker' and 'Start Project', into a responsive grid layout, providing clear pathways to related documentation pages.

```JSX
<Grid $xsCols={1} $lgCols={2}>
  <Box $title="Install Docker" $text="Only one dependency." href="/docs/install-docker" />
  <Box $title="Start Project" $text="Everything you need to start." href="/docs/start-project" />
</Grid>
```

--------------------------------

### Configuring Page Metadata for Docker Installation - JavaScript

Source: https://github.com/luangjokaj/wordpressify-documentation/blob/main/src/app/docs/install-docker/page.mdx

This snippet defines the page's metadata, including its title, description, and Open Graph properties. It imports constants for description and image, ensuring consistent SEO and social media sharing information for the 'Install Docker' page.

```JavaScript
import { PAGE_DESCRIPTION, OG_IMAGE } from "@/app/utils/constants";
import { Box } from "@/app/components/box";

export const metadata = {
  title: "Install Docker - WordPressify - WordPress Development",
  description: PAGE_DESCRIPTION,
  openGraph: {
    title: "Install Docker - WordPressify - WordPress Development",
    description: PAGE_DESCRIPTION,
    images: OG_IMAGE,
  },
};
```

--------------------------------

### Cloning WordPressify Repository - Git/Bash

Source: https://github.com/luangjokaj/wordpressify-documentation/blob/main/src/app/docs/install-wordpressify/page.mdx

This command clones the entire WordPressify project repository from GitHub to the local machine. This method is suitable for developers who prefer to work directly with the source code or contribute to the project. After cloning, manual steps are required to set up the project, including replacing the `package.json` file and installing dependencies.

```bash
git clone https://github.com/luangjokaj/wordpressify
```

--------------------------------

### Rebuilding WordPressify Environment (Docker) (Bash)

Source: https://github.com/luangjokaj/wordpressify-documentation/blob/main/src/app/docs/start-project/page.mdx

This Bash command uses Docker Compose to stop, remove volumes, and then rebuild the WordPressify services. It provides a clean rebuild of the environment when Node.js is not installed locally.

```bash
docker compose down -v && docker compose build
```

--------------------------------

### Setting WordPressify Environment Variables (Bash)

Source: https://github.com/luangjokaj/wordpressify-documentation/blob/main/src/app/docs/start-project/page.mdx

This Bash snippet illustrates how to configure essential environment variables in the `.env` file. It allows customization of the BrowserSync proxy port and the WordPress theme name, critical for project setup and local development.

```bash
# If you want to connect to BrowserSync on a different port. Default: 3010
PROXY_PORT=3010

# Theme name. Default: "wordpressify"
THEME_NAME=wordpressify
```

--------------------------------

### Generating WordPressify Production Files (Docker) (Bash)

Source: https://github.com/luangjokaj/wordpressify-documentation/blob/main/src/app/docs/start-project/page.mdx

This Bash command executes the production build process within the `nodejs` service container using Docker Compose. It's used to generate distribution files when Node.js is not installed locally.

```bash
docker compose run --rm nodejs npm run prod
```

--------------------------------

### Rendering Download Docker Box Component - JSX

Source: https://github.com/luangjokaj/wordpressify-documentation/blob/main/src/app/docs/install-docker/page.mdx

This snippet renders a reusable `Box` component, providing a clickable link to download Docker Desktop. It passes props for the title, descriptive text, and the external download URL, along with a target attribute for opening in a new tab.

```JSX
<Box $title="Download Docker" $text="Choose your operating system and download Docker." href="https://www.docker.com/products/docker-desktop/" target="_blank" />
```

--------------------------------

### Installing Project Dependencies (Bash)

Source: https://github.com/luangjokaj/wordpressify-documentation/blob/main/README.md

This command uses npm to install all required project dependencies. It is a crucial first step before running the WordPressify development environment.

```bash
npm install
```

--------------------------------

### Configuring Metadata for Windows Installation Page - JavaScript

Source: https://github.com/luangjokaj/wordpressify-documentation/blob/main/src/app/docs/windows-installation/page.mdx

This snippet defines the page's metadata, including title, description, and Open Graph image, for SEO and social media sharing. It uses imported constants for reusability, ensuring consistent branding and information across the site.

```javascript
import { PAGE_DESCRIPTION, OG_IMAGE } from "@/app/utils/constants";
import { Box } from "@/app/components/box";

export const metadata = {
  title: "Windows Installation - WordPressify - WordPress Development",
  description: PAGE_DESCRIPTION,
  openGraph: {
    title: "Windows Installation - WordPressify - WordPress Development",
    description: PAGE_DESCRIPTION,
    images: OG_IMAGE
  }
};
```

--------------------------------

### Generating WordPressify Production Files (npm) (Bash)

Source: https://github.com/luangjokaj/wordpressify-documentation/blob/main/src/app/docs/start-project/page.mdx

This Bash command generates the optimized distribution files for the WordPressify theme using `npm run export`. It prepares the theme for production deployment by packaging it into a deployable format.

```bash
npm run export
```

--------------------------------

### Installing Sass and Gulp-Sass Dependencies

Source: https://github.com/luangjokaj/wordpressify-documentation/blob/main/src/app/docs/postcss-sass/page.mdx

This command installs the necessary `sass` and `gulp-sass` packages. These packages are required to enable Sass compilation within the Gulp build process for WordPressify projects.

```Bash
npm install sass gulp-sass
```

--------------------------------

### Generating WordPressify Distribution Files (Shell)

Source: https://github.com/luangjokaj/wordpressify-documentation/blob/main/src/app/docs/snippets/demo.mdx

This command generates the optimized distribution files for the WordPressify project, preparing it for deployment. It typically minifies code, optimizes assets, and bundles the project into a production-ready format. This is the final step before deploying the application.

```Shell
npm run export
```

--------------------------------

### Locating WordPressify Production Output (Bash)

Source: https://github.com/luangjokaj/wordpressify-documentation/blob/main/src/app/docs/start-project/page.mdx

This Bash snippet specifies the `dist/wordpressify.zip` path, which is where the final production-ready WordPress theme zip file will be saved after the export process. This file is ready for deployment.

```bash
dist/wordpressify.zip
```

--------------------------------

### Deploying WordPressify with SSH using GitHub Actions

Source: https://github.com/luangjokaj/wordpressify-documentation/blob/main/src/app/docs/auto-deploy/page.mdx

This GitHub Actions workflow automates the deployment of a WordPressify project to a WordPress site via SSH using `rsync`. It checks out the repository, sets up Node.js, installs dependencies, builds the theme, sets file permissions, installs an SSH key, and then uses `rsync` to synchronize the built theme to the remote server. It requires `SSH_HOST`, `SSH_USERNAME`, `SSH_KNOWN_HOSTS`, and `SSH_PRIVATE_KEY` as GitHub secrets and `THEME_NAME` as a GitHub variable.

```YAML
name: Deploy WordPressify

on:
  push:
    branches:
      - develop

env:
  THEME_NAME: ${{ vars.THEME_NAME }}

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: "20"

      - name: Install dependencies
        run: |
          npm install
          npm run build

      - name: Build theme
        run: |
          npm run export

      - name: Set permissions
        run: |
          sudo chown -R $USER:$USER ./dist
          chmod -R 755 ./dist
          mkdir -p dist/themes/${{ env.THEME_NAME }}

      - name: Install SSH key
        uses: shimataro/ssh-key-action@v2
        with:
          key: ${{ secrets.SSH_PRIVATE_KEY }}
          known_hosts: ${{ secrets.SSH_KNOWN_HOSTS }}

      - name: Deploy to WordPress via SSH
        run: |
          rsync -avz --delete \
            -e \"ssh -p 22\" \
            --exclude '.git*' \
            --exclude '.git*/**' \
            --exclude 'node_modules/**' \
            --exclude 'src/**' \
            --exclude 'gulpfile.js' \
            --exclude 'package.json' \
            --exclude 'package-lock.json' \
            ./dist/themes/${{ env.THEME_NAME }}/ \
            ${{ secrets.SSH_USERNAME }}@${{ secrets.SSH_HOST }}:/var/www/riangle/wordpress/wp-content/themes/${{ env.THEME_NAME }}/
```

--------------------------------

### Generating Distribution Files with npm - WordPressify - Bash

Source: https://github.com/luangjokaj/wordpressify-documentation/blob/main/src/app/docs/distribution-files/page.mdx

This command initiates the build process to generate minified and optimized distribution files for a WordPressify project. It requires Node.js and npm to be installed locally and will output all necessary files into a `dist` folder.

```bash
npm run export
```

--------------------------------

### Importing Sass and Gulp-Sass into Gulpfile

Source: https://github.com/luangjokaj/wordpressify-documentation/blob/main/src/app/docs/postcss-sass/page.mdx

This JavaScript snippet demonstrates how to import and initialize `dartSass` and `gulp-sass` within the `gulpfile.js`. This setup is crucial for integrating Sass compilation capabilities into the Gulp build system.

```JavaScript
import dartSass from 'sass';
import gulpSass from 'gulp-sass';
const sass = gulpSass(dartSass);
```

--------------------------------

### Rebuilding WordPressify with Docker Compose

Source: https://github.com/luangjokaj/wordpressify-documentation/blob/main/src/app/docs/build-changes/page.mdx

This Bash command is an alternative for rebuilding the WordPressify project, specifically for environments where Node.js is not installed locally. It leverages Docker Compose to rebuild the necessary containers.

```bash
docker compose build
```

--------------------------------

### Accessing WordPressify Plugins Directory (Bash)

Source: https://github.com/luangjokaj/wordpressify-documentation/blob/main/src/app/docs/start-project/page.mdx

This Bash snippet indicates the `src/plugins` directory, which is the designated location for adding or developing custom WordPress plugins within the WordPressify project. It's crucial for extending theme functionality.

```bash
src/plugins
```

--------------------------------

### Rebuilding WordPressify with npm

Source: https://github.com/luangjokaj/wordpressify-documentation/blob/main/src/app/docs/build-changes/page.mdx

This Bash command is used to rebuild the WordPressify project when Node.js is installed locally. It ensures that any changes to configuration or source files are applied by restarting the containers.

```bash
npm run build
```

--------------------------------

### Deploying WordPressify with FTP using GitHub Actions

Source: https://github.com/luangjokaj/wordpressify-documentation/blob/main/src/app/docs/auto-deploy/page.mdx

This GitHub Actions workflow automates the deployment of a WordPressify project to a WordPress site via FTP. It checks out the repository, sets up Node.js, installs dependencies, builds the theme, sets necessary file permissions, and then uses the `SamKirkland/FTP-Deploy-Action` to synchronize the built theme to the specified server directory. It requires `FTP_SERVER`, `FTP_USERNAME`, and `FTP_PASSWORD` as GitHub secrets and `THEME_NAME` as a GitHub variable.

```YAML
name: Deploy WordPressify
on:
  push:
    branches:
      - main
env:
  THEME_NAME: ${{ vars.THEME_NAME }} # Define theme name as environment variable

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: "20"

      - name: Install dependencies
        run: |
          npm install
          npm run build

      - name: Build theme
        run: |
          npm run export

      - name: Set permissions
        run: |
          sudo chown -R $USER:$USER ./dist
          chmod -R 755 ./dist
          mkdir -p dist/themes/${{ env.THEME_NAME }}
          touch dist/themes/${{ env.THEME_NAME }}/.ftp-deploy-sync-state.json
          chmod 666 dist/themes/${{ env.THEME_NAME }}/.ftp-deploy-sync-state.json

      - name: Deploy to WordPress
        uses: SamKirkland/FTP-Deploy-Action@v4.3.4
        with:
          server: ${{ secrets.FTP_SERVER }}
          username: ${{ secrets.FTP_USERNAME }}
          password: ${{ secrets.FTP_PASSWORD }}
          local-dir: ./dist/themes/${{ env.THEME_NAME }}/
          server-dir: /public_html/wp-content/themes/${{ env.THEME_NAME }}/
          exclude: |
            **/.git*
            **/.git*/**
            **/node_modules/**
            **/src/**
            gulpfile.js
            package.json
            package-lock.json
```

--------------------------------

### Configuring Next.js Page Metadata for WordPressify (TypeScript)

Source: https://github.com/luangjokaj/wordpressify-documentation/blob/main/src/app/docs/start-project/page.mdx

This TypeScript snippet defines the `metadata` object for a Next.js page, setting the document title, description, and Open Graph properties. It leverages imported constants for consistent SEO and social media sharing information.

```typescript
import { PAGE_DESCRIPTION, OG_IMAGE } from "@/app/utils/constants";

export const metadata = {
  title: "Start Project - WordPressify - WordPress Development",
  description: PAGE_DESCRIPTION,
  openGraph: {
    title: "Start Project - WordPressify - WordPress Development",
    description: PAGE_DESCRIPTION,
    images: OG_IMAGE,
  },
};
```

--------------------------------

### Generating Distribution Files with Docker - WordPressify - Bash

Source: https://github.com/luangjokaj/wordpressify-documentation/blob/main/src/app/docs/distribution-files/page.mdx

This command provides an alternative method to generate distribution files using Docker, specifically when Node.js is not installed locally. It runs the `npm run prod` command within a `nodejs` Docker service, producing minified and optimized files in the `dist` folder.

```bash
docker compose run --rm nodejs npm run prod
```

--------------------------------

### Setting USE_POLLING Environment Variable - Bash

Source: https://github.com/luangjokaj/wordpressify-documentation/blob/main/src/app/docs/windows-installation/page.mdx

This snippet demonstrates how to set the `USE_POLLING` environment variable to `true` within the `.env` file. This configuration is essential for Windows users to ensure the file watcher operates correctly, addressing potential issues with file system event detection on the platform.

```bash
# Use polling for file watcher. Default: false
# Windows users should set this to true
USE_POLLING=true
```

--------------------------------

### Running Development Environment (Bash)

Source: https://github.com/luangjokaj/wordpressify-documentation/blob/main/README.md

This command initiates the WordPressify development server. It enables developers to work on the project with features like live reloading and other development tools.

```bash
npm run dev
```

--------------------------------

### Defining Page Metadata for WordPressify Documentation - JavaScript

Source: https://github.com/luangjokaj/wordpressify-documentation/blob/main/src/app/docs/page.mdx

This snippet defines the page metadata for the WordPressify documentation's introduction page. It sets the document title, description, and Open Graph properties for social media sharing. It relies on imported constants PAGE_DESCRIPTION and OG_IMAGE for dynamic content, enhancing SEO and social media presence.

```JavaScript
import { PAGE_DESCRIPTION, OG_IMAGE } from "@/app/utils/constants";
import { Grid } from "cherry-styled-components/src/lib";
import { Box } from "@/app/components/box";

export const metadata = {
  title: "Docs - Introduction - WordPressify - WordPress Development",
  description: PAGE_DESCRIPTION,
  openGraph: {
    title: "Docs - Introduction - WordPressify - WordPress Development",
    description: PAGE_DESCRIPTION,
    images: OG_IMAGE
  }
};
```

--------------------------------

### Configuring GitHub Actions FTP Deployment Secrets

Source: https://github.com/luangjokaj/wordpressify-documentation/blob/main/src/app/docs/auto-deploy/page.mdx

This snippet provides the structure for setting up essential FTP secrets ('FTP_SERVER', 'FTP_USERNAME', 'FTP_PASSWORD') within GitHub Actions. These secrets are crucial for securely authenticating and connecting to an FTP server for automated deployment workflows.

```plaintext
FTP_SERVER
Value: your-domain.com or ftp.your-domain.com

FTP_USERNAME
Value: your-ftp-username

FTP_PASSWORD
Value: your-ftp-password
```

--------------------------------

### Recommended Image Asset Directory - Bash

Source: https://github.com/luangjokaj/wordpressify-documentation/blob/main/src/app/docs/images-fonts/page.mdx

This snippet specifies the recommended directory path within a WordPressify theme for storing template-specific image assets. It advises placing SVG or minimal assets here to optimize theme loading speed and maintain a lightweight template, while other images should use the WordPress Media Library.

```Bash
src/assets/img/
```

--------------------------------

### Setting Page Metadata for Troubleshooting - Next.js

Source: https://github.com/luangjokaj/wordpressify-documentation/blob/main/src/app/docs/troubleshooting/page.mdx

This snippet defines the metadata for the troubleshooting page in a Next.js application, including the title, description, and Open Graph image, ensuring proper SEO and social media sharing. It imports constants for description and image paths.

```javascript
import { PAGE_DESCRIPTION, OG_IMAGE } from "@/app/utils/constants";

export const metadata = {
  title: "Troubleshooting - WordPressify - WordPress Development",
  description: PAGE_DESCRIPTION,
  openGraph: {
    title: "Troubleshooting - WordPressify - WordPress Development",
    description: PAGE_DESCRIPTION,
    images: OG_IMAGE,
  }
};
```

--------------------------------

### Configuring JavaScript Bundles for Header and Footer in WordPressify

Source: https://github.com/luangjokaj/wordpressify-documentation/blob/main/src/app/docs/external-libraries/page.mdx

This snippet demonstrates how to configure JavaScript bundles for the header and footer sections of a WordPressify project. The `headerJS` array is used for scripts that load before the DOM, while `footerJS` is for scripts that load after the DOM, with `footerJS` scripts typically undergoing Babel processing for ES6 support.

```javascript
/* -------------------------------------------------------------------------------------------------
Header & Footer JavaScript Bundles
-------------------------------------------------------------------------------------------------- */
const headerJS = [ './node_modules/jquery/dist/jquery.js' ];
const footerJS = [ './src/assets/js/**' ];
```

--------------------------------

### Specifying JavaScript File Location in WordPressify

Source: https://github.com/luangjokaj/wordpressify-documentation/blob/main/src/app/docs/javascript/page.mdx

This snippet indicates the recommended directory for placing JavaScript source files within a WordPressify project. WordPressify actively monitors this directory for changes and processes the files for bundling.

```bash
src/assets/js/
```

--------------------------------

### Setting GitHub Actions Theme Name Variable

Source: https://github.com/luangjokaj/wordpressify-documentation/blob/main/src/app/docs/auto-deploy/page.mdx

This snippet shows how to define the 'THEME_NAME' variable in GitHub Actions repository settings. This variable is used to specify the name of your theme, which can be referenced by workflows for tasks like deployment or build processes.

```plaintext
THEME_NAME
```

--------------------------------

### Output JavaScript Bundle Filename in WordPressify

Source: https://github.com/luangjokaj/wordpressify-documentation/blob/main/src/app/docs/javascript/page.mdx

This snippet shows the default filename for the consolidated JavaScript bundle generated by WordPressify. This file, `footer-bundle.js`, is automatically included in the footer of the generated HTML pages.

```bash
footer-bundle.js
```

--------------------------------

### Configuring Gulp StylesDev Task for Sass

Source: https://github.com/luangjokaj/wordpressify-documentation/blob/main/src/app/docs/postcss-sass/page.mdx

This Gulp task processes Sass files for the development environment. It initializes sourcemaps, compiles Sass, handles errors, writes sourcemaps, outputs compiled CSS to the development theme directory, and streams changes for live reloading.

```JavaScript
function stylesDev() {
  return src('./src/assets/css/style.scss')
    .pipe(sourcemaps.init())
    .pipe(sass({includePaths: 'node_modules'}).on('error', sass.logError))
	 .pipe(sourcemaps.write('.'))
	 .pipe(dest('./build/wordpress/wp-content/themes/' + themeName))
	 .pipe(browserSync.stream({ match: '**/*.css' }));
}
```

--------------------------------

### Defining Page Metadata in Next.js

Source: https://github.com/luangjokaj/wordpressify-documentation/blob/main/src/app/docs/build-changes/page.mdx

This JavaScript snippet defines the page metadata for a Next.js application, including title, description, and Open Graph image, which are used for SEO and social media sharing. It imports constants for description and image paths.

```JavaScript
import { PAGE_DESCRIPTION, OG_IMAGE } from "@/app/utils/constants";

export const metadata = {
  title: "Build Changes - WordPressify - WordPress Development",
  description: PAGE_DESCRIPTION,
  openGraph: {
    title: "Build Changes - WordPressify - WordPress Development",
    description: PAGE_DESCRIPTION,
    images: OG_IMAGE,
  },
};
```

--------------------------------

### Configuring Gulp StylesProd Task for Sass

Source: https://github.com/luangjokaj/wordpressify-documentation/blob/main/src/app/docs/postcss-sass/page.mdx

This Gulp task processes Sass files for the production environment. It compiles Sass, includes node modules, handles errors, and outputs the compiled CSS to the production theme distribution directory without sourcemaps or live reloading.

```JavaScript
function stylesProd() {
  return src('./src/assets/css/style.scss')
    .pipe(sass({includePaths: 'node_modules'}).on('error', sass.logError))
	 .pipe(dest('./dist/themes/' + themeName));
}
```

--------------------------------

### Defining Page Metadata for Images and Fonts - JavaScript

Source: https://github.com/luangjokaj/wordpressify-documentation/blob/main/src/app/docs/images-fonts/page.mdx

This snippet defines the page metadata for the 'Images and Fonts' documentation page using Next.js's `metadata` export. It sets the title, description, and Open Graph image for SEO and social sharing purposes, importing constants for reusability.

```JavaScript
import { PAGE_DESCRIPTION, OG_IMAGE } from "@/app/utils/constants";

export const metadata = {
  title: "Images and Fonts - WordPressify - WordPress Development",
  description: PAGE_DESCRIPTION,
  openGraph: {
    title: "Images and Fonts - WordPressify - WordPress Development",
    description: PAGE_DESCRIPTION,
    images: OG_IMAGE,
  },
};
```

--------------------------------

### Locating Primary CSS File in WordPressify

Source: https://github.com/luangjokaj/wordpressify-documentation/blob/main/src/app/docs/postcss-sass/page.mdx

This snippet indicates the default location of the primary CSS file within a WordPressify project. This file serves as the main entry point for all CSS styling, including template definitions and imports for other stylesheets.

```Bash
src/assets/css/style.css
```

--------------------------------

### Updating Proxy Port in .env File - Configuration

Source: https://github.com/luangjokaj/wordpressify-documentation/blob/main/src/app/docs/troubleshooting/page.mdx

This snippet illustrates how to resolve a 'port already allocated' error by modifying the PROXY_PORT variable in the .env configuration file. Setting it to a different value, such as 3030, helps avoid port conflicts.

```dotenv
PROXY_PORT=3030
```

--------------------------------

### Watching Sass Files for Development Changes

Source: https://github.com/luangjokaj/wordpressify-documentation/blob/main/src/app/docs/postcss-sass/page.mdx

This Gulp watch task monitors all `.scss` files within the `src/assets/css/` directory and its subdirectories. When changes are detected, it triggers the `stylesDev` task to recompile the Sass, ensuring live updates during development.

```JavaScript
watch('./src/assets/css/**/*.scss', stylesDev);
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.