Update readme

README.md

@@ -9,91 +9,80 @@
 - Backend in WordPress.
 - Front end in React
 
-## [Backend](https://github.com/imranhsayed/nextjs-headless-wordpress/tree/master/backend)
-Run this from root
-```bash
-docker-compose -f backend/docker-compose.yml up -d 
-```
+#Setup
 
-*WordPress Backend* will be available on [http://localhost:8020](http://localhost:8020)
+First clone/fork the repo and cd into it.
 
-*[phpMyAdmin](https://github.com/phpmyadmin/phpmyadmin)*: You can access php myadmin on [http://localhost:8183](http://localhost:8183)
-```shell script
-port: mysql:3306
-username: root
-password: root
-``` 
+```bash
+git clone https://github.com/imranhsayed/nextjs-headless-wordpress.git
+cd nextjs-headless-wordpress
+```
+It's very simple to setup the project with just one command and this `./nxtwp configure`
 
-phpmyadmin docker image already comes with the username `root` and we have set the mysql password in the dockerfile
+**One command project setup**
 
-* If you happen to use your own WordPress setup, be sure to install and activate plugins from composer.json and add your own WordPress site URL
-in an .env file, You can check the .env-example file for reference.
+The below command is going to set up the project in the interactive mode.
+It creates an .env file for front-end next.js project and setsup up frontend and/or backend.
+Run this from the root of the project.
 
-## [Frontend](https://github.com/imranhsayed/nextjs-headless-wordpress/tree/master/frontend)
-Run this from root for the first time.
 ```bash
-cd frontend; npm i && npm run dev
+./nxtwp configure
 ```
+It's going to ask you a few of questions.
 
-### During development
 ```bash
-cd frontend; npm run dev
+Q1. Do you already have a WordPress setup that you want to continue with? [y/n]:
 ```
+*Answer*
 
-Frontend will be available on port [http://localhost:3000](http://localhost:3000)
-
-### Evironment vars. 
-Create a `.env` file taking reference from `.env-example` inside frontend directory and add your WordPress Site URL ( for local development put `http://localhost:8020` as your WordPress URL)
+`y`: If you would like to use this project's WordPress Docker setup ( In which case make sure to install and active all plugins from [backend/plugins-collection])
+`n`: If you want to use your own WordPress setup.
 
-## Development ( Developers only )
-
-1. When we change the composer.json, run from root
-```shell script
-docker-compose -f backend/docker-compose.yml down && \
-docker-compose -f backend/docker-compose.yml up -d 
-```
-
-First line command will stops and removes all the docker containers and second line command will restart all containers.
-Notice that `-d` is to run in detach mode and you can always remove that flag, and run the command so you can see the live logs.
-Or you can check the logs for 
-
-2. Check the logs
-While the above command is running in detached mode ( -d ), you can run this command in a new terminal tab to see the live logs.
-```shell script
-docker logs -f container-name
+```bash
+Q2. ✍️  What is your WP backend URL? (defaults to http://localhost:8020): 
 ```
+Leave it blank if you would like to use this project's WordPress Docker setup,
+else enter your own WordPress site URL.
 
-3. Login to SSH and wp cli.
-```
-docker exec -it image-name bash // e.g. docker exec -it backend_wordpress_1 bash
-wp
+```bash
+✍️  What is your frontend next js URL? (defaults to http://localhost:3000):
 ```
+Leave this blank for development, as it will be the same as default for next.js
 
-e.g.
 ```bash
-docker container ls
+✍️  What is your Disqus comments shortname? (leave blank if you are not using): 
 ```
 
-#### result
-```shell script
-CONTAINER ID        IMAGE               COMMAND                  CREATED              STATUS              PORTS                  NAMES
-d0b4a3b0074f        wordpress:latest    "docker-entrypoint.s…"   About a minute ago   Up About a minute   0.0.0.0:8000->80/tcp   backend_wordpress_1
-aad078ebe131        mysql:5.7           "docker-entrypoint.s…"   About a minute ago   Up About a minute   3306/tcp, 33060/tcp    backend_db_1
-```
-Here container-name is `backend_db_1` or `backend_wordpress_1`
+Leave this blank if you are not going to use the Disqus comments, else enter your Disqus comments shortname.
 
-3. If you make changes to docker-compose.yml file, run the following:
+That's it!
+This is going to automatically:
+- Creates the `.env` file in the frontend directory.
+- Setup WordPress backend with all the plugins via composer (if you chose y for the first question)
+- Install npm packages for next.js frontend and start development server.
 
-If you happend to change the port in `docker-compose.yml` make sure to delete the `db` directory and then run below.
+**WordPress Backend** will be available on [http://localhost:8020](http://localhost:8020)
+**Next.js Backend** will be available on port [http://localhost:3000](http://localhost:3000)
+ 
+* Make sure to activate all plugins that it has installed via composer.
+* Update block registry by going to WordPress Dashboard > GraphQL Gutenberg. 
+* For more information checkout the project [Wiki](https://github.com/imranhsayed/nextjs-headless-wordpress/wiki/)
 
-```shell script
-docker-compose -f backend/docker-compose.yml down && \
-docker-compose -f backend/docker-compose.yml up -d
+### During development
+
+Useful commands:
+
+```bash
+./nxtwp configure       # Sets up backend and frontend and creates an .env file
+./nxtwp start-all       # Creates and starts docker environment for WP and runs Next JS server
+./nxtwp start-backend   # Creates and starts docker environment
+./nxtwp start-frontend  # Installs all packages and Runs Next JS server
+./nxtwp stop            # Stops the WordPress docker containers
 ```
 
 ## Debugging
 
-1. If you get 404 on frontend for graphql request, check to see that the .htaccess file in wordpress directory has the rules
+1. If you get 404 on frontend for graphql request, check to see that the `.htaccess` file in wordpress directory has the rules
 
 ```shell script
 # BEGIN WordPress
@@ -112,6 +101,12 @@ RewriteRule . /index.php [L]
 # END WordPress
 ```
 
+2. If front-end isn't throwing some other error.
+
+- Check if all the required WordPress plugins form `backend/plugins-collection` are active.
+- Ensure you have updated the block registry from WordPress backend > GraphQL Gutenberg 
+- Ensure that `.env` file has correct env variables and their values in `frontend/.env`
+
 ## References for Docker Images.
 
 1. [phpMyAdmin](https://github.com/fuadajip/dockercompose-mysql-phpmyadmin/blob/master/docker-compose.yml)

backend/docker-compose.yml-e

@@ -0,0 +1,52 @@
+version: '3.3'
+
+services:
+  composer:
+    image: composer
+    command: update
+    volumes:
+      - ./wordpress:/app
+
+  mysql:
+    image: mysql:5.7
+    volumes:
+      - mysql_data:/var/lib/mysql
+    restart: always
+    environment:
+      MYSQL_ROOT_PASSWORD: root
+      MYSQL_DATABASE: wordpress
+      MYSQL_USER: wordpress
+      MYSQL_PASSWORD: wordpress
+    volumes:
+      -  ./mysql:/var/lib/mysql
+
+  phpmyadmin:
+    image: phpmyadmin/phpmyadmin
+    depends_on:
+      - mysql
+    environment:
+      PMA_HOST: mysql
+      PMA_PORT: 3306
+      PMA_ARBITRARY: 1
+    restart: always
+    ports:
+      - 8183:80
+
+  wordpress:
+    depends_on:
+      - mysql
+      - composer
+    image: wordpress:latest
+    ports:
+      - "8020:80"
+    restart: always
+    environment:
+      WORDPRESS_DB_HOST: mysql:3306
+      WORDPRESS_DB_USER: wordpress
+      WORDPRESS_DB_PASSWORD: wordpress
+      WORDPRESS_DB_NAME: wordpress
+    volumes:
+      - ./wordpress:/var/www/html
+
+volumes:
+  mysql_data: {}

nxtwp

@@ -10,7 +10,7 @@ BOLD='\033[1m'
 # Configureation part of .env file and docker-compose file
 function proceed_with_WP_environment() {
 
-    # user-input - WP Backend URL 
+    # user-input - WP Backend URL
     read -p "$(echo -e $BOLD"✍️  What is your WP backend URL? (defaults to http://localhost:8020): "$NOCOLOR)" WP_backend_url
     [ -z "$WP_backend_url" ] && echo -e $YELLOW"⚠️  Using default WP URL"$NOCOLOR && WP_backend_url="http://localhost:8020"
     check_url_input $WP_backend_url
@@ -68,7 +68,7 @@ function check_url_input() {
     user_input=$1
 
     if ! [[ $user_input =~ $regex ]]
-    then 
+    then
         echo -e $RED"🛑 URL is not valid."$NOCOLOR
         echo -e $RED"Example URL is: http://example.com:8000"$NOCOLOR
         exit
@@ -106,8 +106,8 @@ function command_help() {
 
     echo "Please pass an argument"
     echo "Arguments: [ configure | start-all | start-backend | start-frontend | stop ]"
-    echo "" 
-    echo "configure       Configures WP Url and .env file"
+    echo ""
+    echo "configure       Sets up backend and frontend and creates an .env file"
     echo "start-all       Creates and starts docker environment for WP and runs Next JS server"
     echo "start-backend   Creates and starts docker environment"
     echo "start-frontend  Runs Next JS server"