Uruchomienie projektu WP + Next.js na Windows

WSL2

It is recommended to use Windows Subsystem for Linux on Windows with Ubuntu distribution, because sharing WordPress files between host machine and Docker make it working really slow.

Useful links:

Docker Desktop WSL 2 backend on Windows

Additional tutorial

NodeJS installation on WSL

In case of permission denied errors displayed in VS Code:

  In WSL terminal:

  sudo chown -R wsl_user project_directory

In case of permission denied errors displayed in WP Admin:

Open wordpress docker container in terminal and execute command below:

chown -R www-data:www-data /var/www/html

Docker

Add the following line to C:\Windows\System32\drivers\etc\hosts file:

127.0.0.1 project_name.local

Run the following command in project root directory:

docker-compose up -d

Backend

cd backend
copy .env.example and rename to .env -> fill in database details
run composer install
cd backend/web/app/themes/biggerpicture -> run composer install
Enter WP Admin http://project_name.local/wp/wp-admin and proceed WordPress installation
Go to Appearance -> Themes and activate biggerpicture theme
Go to Plugins and activate all of them
Go to Settings -> Permalinks and choose Structure -> Post name
Go to GRaphQL -> GraphqL IDE and paste in the following code:

mutation Login {
  login(
    input: {
      clientMutationId: "uniqueId"
      password: "your_wp_password"
      username: "your_wp_username"
    }
  ) {
    refreshToken
  }
}

Remove theme backend/web/app/themes/twentytwentythree if it was created during installation

Frontend

cd frontend
copy .env.exampleand rename to .env.local -> fill in using details below:

WORDPRESS_API_URL – http://project_name.local/wp/graphql

WORDPRESS_AUTH_REFRESH_TOKEN – token generated by GraphqL IDE

WORDPRESS_PREVIEW_SECRET – secret key e.g. ‘helloworld’

run npm install
start the development server npm run dev

Additional information

Pages created in WP Admin will be handled automatically by frontend and available under specific slugs e.g. ‘/about-us’ for About us page.