How to create a fullstack web app with Nuxt, Vue, Node, GraphQL and Docker

In this series I want to give you a short introduction on how you could create a fullstack web app using Vue.js on the client side with Nuxtjs for server side rendering, Node.js on the server side and how those two worlds communicate via GraphQL using the famous Apollo Framework. While creating that project I also want to give an idea on how to glue all those things together and how you could structure your application. I will give you a short overview of the existing and upcoming topics, although those might change when I write these articles and see a need to restructure it.

Index

Development setup with Nuxt, Node and Docker

Roadmap

1. Continuous Integration with Nuxt, Node and Gitlab
2. Setting up a GraphQL server on Node.js using Express and Apollo
3. Adding a database to a GraphQL API
4. Add authentication to a GraphQL API
5. Making a GraphQL schema modular
6. Add user management to a GraphQL API
7. Testing the GraphQL API
8. Setting up a Vue.js frontend that talks to a GraphQL API
9. Sharing files between frontend and server using Docker
10. How to create a clean async store for Vuex
11. Setting up a test runner and coverage report for Vue
12. How to test a Vuex store properly
13. How to create a secured admin area in Vue
14. Manage users in an admin panel
15. Deploying the application

Follow i22 and my personal Medium account to be notified about the release of those articles.

Marc Mintel - Medium

i22 Digital Agency

Requirements

This guide is not going to explain the very basics of web development. You should be familiar with JavaScript (ES6), Git, NPM, Bash and Vue.js basics (the very basics, I will explain advanced concepts). You must also know the basics of GraphQL, you should know about its types and such. I am not going to explain what GraphQL is and why and when you need it.

Project setup

The whole project will be placed into a single repository to make things easier. However we still want to separate the code for the frontend and server side, so it would be still possible to split those into multiple repositories later. We will setup a development environment with and without Docker and also make sure our code base will be solid using Gitlab’s continuous integration pipeline.

Code examples

I will push every single line of the code mentioned here into this Github Repository. You will then be able to browse the code of every chapter in a different branch. The master branch will always be the current state, each single part will be present in a separate branch.

i22-digitalagentur/fullstack-web-app-example

Marc Mintel is a senior frontend developer at i22.