danghungithp/wagtail_nuxt

Dockerized Wagtail 4 backend with NuxtJS 3 frontend using GraphQL and Apollo for API and Vuetify 3 for templates.

Dockerized Wagtail 4 + NuxtJS 3 + Graphene 3 + Vuetify 3

For developement:

1. Clone repository

$ git clone [email protected]:ordigital/wagtail_nuxtjs.git && cd wagtail_nuxtjs

2. Build Docker images

Execute this command to build Docker images with access to local frontend and backend folders (see docker-compose.yml). This way live changes in code would be possible (needs at least 2GB free space):

$ ./run dev

3. Create Wagtail superuser

Execute this command in console while docker dev images are running to be able to run ./manage.py:

$ ./run wag

4. Test if http endpoints are working

Open Wagtail admin panel to add some subpages to Home with News Page type. Then open frontend to test if GraphQL api is fetching data.

• Backend admin panel: http://localhost:8000/admin (remember to add some NewsPages to test api!)
• Simple frontend with GraphQL test: http://localhost:8000
• GraphQL console for testing: http://localhost:8000/api/graphiql
• GraphQL api: http://localhost:8000/api/graphql (try /api/graphql/?query articles { articles {title intro}})
• Wagtail api: http://localhost:8000/api/v2/ (try /api/v2/pages to test)

You can also install Vue.js devtools and Apollo Client Tools for Chrome/Brave to make your work easier.

---

For production:

1. Run containers for production

$ ./run prod

2. Test if Nginx proxy responds

• http://localhost:8000 should point to NuxtJS static frontend
• http://localhost:8000/static should point to Wagtail static folder
• http://localhost:8000/admin should point to Wagtail admin panel
• http://localhost:8000/django-admin should point to Django admin panel

2. Customize settings

If everything went well, stop container and edit backend/backend/.env to set important variables. Now you can build again and use images for production server.

3. Export files

Run command below to create wagtail_nuxt_production.tar.gz file with everything you need to deploy on server:

• Wagtail with Gunicorn Docker image (port 7999)
• Wagtail static files directory
• Wagtail database db.sqlite3
• Wagtail .env file
• Nginx public static files
• Nginx sample proxy file.

$ ./run save

4. Deploy on server

• Use docker load -i ./wagtail_gunicorn.tar to import docker image.
• Create vhost config based on nginx.conf.
• Copy /static and /public to where nginx proxy would get them from.
• Use docker run with exec command ./docker-entrypoint.prod.sh to start container from image.

Remember you must bind some source files because db.sqlite3 and .env is not in docker image!!!

Example:

docker run -d \
     --name wagtail  \
     --mount type=bind,source=/LOCAL/db.sqlite3,target=/app/db.sqlite3 \
     --mount type=bind,source=/LOCAL/.env,target=/app/backend/.env \
     --restart=unless-stopped \
     -p 7999:7999 \
     wagtail_nuxt_web \
     ./docker-entrypoint.prod.sh

Enjoy! :)