This is a starter template for GrapQL fullstack application using the following technologies:
- Typescript, a type safe version of Javascript to increase confidence in your code.
- Vue.js 3, an amazing front-end framework to design modern UIs.
- Vite, a fast development server for the front-end with HMR (Hot Module Replacement).
- Node.js with Apollo Server (on top of Koa), a stack for back-end development of a GraphQL server.
- PostgreSQL database.
- TypeORM, an Object Relational Mapping for Javascript.
- GrapQL Code Gen, a tool to generate GraphQL resolvers and operations from your GraphQL schemas.
The project relies on Docker and docker-compose for its development environnement. The compose file defines 4 services:
- db: the PostgreSQL database.
- back: the back-end server.
- front: the front-end dev server.
- nginx: a self-signed reverse proxy for easy development without worrying about http vs https issue and CORS.
Simply run the command docker-compose up to run dev servers and have everything setup for you.
Once docker containers are built, navigate to:
- https://localhost to access Vite front-end dev server with HMR.
- https://localhost/graphql to access back-end server. Navigating to this route in your browser gives access to the Apollo GraphQL dev-tool which provide request design tools.
A basic login is implemented to serve as an example. However there is no register, so to test it you have to register via the graphql route and issue a GraphQL request looking like that:
mutation {
register(
email: "your.email@example.com"
username: "anonymous"
password: "verystrongpassword"
) {
id
email
username
}
}The project relies on GraphQL Code Generation to create resolvers and graphql-request automatically. The generation is automatically done when the schema are updated.
I did this template on my freetime to have a common base for my various web project ideas. I am not a professional web developper, feel free to suggest any improvement via PR or creating an issue.