Boilerplate Vue + Vuex + Vuetify + Apollo Client + GraphQL + Express + MongoDB + HTTP/2
Just a simple way of starting your projects with these marvelous technologies!
Installing
Download or clone the repository and access the server folder.
- cd server
- npm install
Then navigate towards the client folder and wait for dependencies to finish downloading.
- cd client
- npm install
After that you will need to determine your the MongoDB connection string in server.js,as well as the database user and password inside an .env file in the server folder.Furthermore you can setup HTTP/2 with a CERT and KEY files (Use OpenSSL if you do not own a valid certificate).
When everything is ready, you just navigate and start the server and client:
- cd client
- npm start
and
- cd server
- npm start
and VOALA, you are good to go!
Build
If you need or want to build your client app and use just one server, you can perform
- cd client
- npm run build
then you take the output folder and take it to the server-side src folder.
REMEMBER!You have to change the GraphQL uri in the Apollo Client and the WebSocket uri accordingly!
You may also need to set your favicon!
Built With
FRONT-END
- Vue - Progressive Javascript Framework for UIs
- Vuex - Flux State Management
- Vue-router - SPA Routing
- Vuetify - Material UI Design
- Vue-Apollo - Integration for Vue/Apollo/GraphQL
BACK-END
- GraphQL - A Query Language for APIs
- Express - Fast minimalist web framework for NodeJS
- NodeJS - JavaScript runtime environment
DATABASE
DEVTOOLS
- Babel-watch - Hot Reload for Babel-Node Apps
Authors
- Lucas Otero - Initial work - Romucci
License
This project is licensed under the MIT License.
Acknowledgments
I have compiled all the different technologies I have learnt to love and put them all together in a simple-to-start-with package!Hope you love it too!
-
前言 GraphQL 这门新技术在去年就开始火热起来，今年也在很多技术周刊、论坛上看到关于这门新技术的研究和讨论。因此作为一名前端开发，紧跟技术潮流是必须的 ?，周末便花了点时间对 GraphQL 进行了相关学习，学习过程中写了一些简单的 demo，在此过程中发现这玩意是真的香啊，所以决定要开篇博客来记录下这个过程。 什么是 GraphQL ？ 当学习一本新技术时，首先就要去了解这门新技术的定位和
-
1、首先我们需要安装一下vue-apollo 具体执行命令如下： npm install –save vue-apollo graphql apollo-client apollo-link apollo-link-http apollo-cache-inmemory graphql-tag 2、在我们的项目的根目录下创建一个vueApollo.js文件具体配置如下： import { Apoll
-
前言 继上次完成在Ant Design Pro Vue中集成GraphQL使用后，为了配合后端做日志记录，需要进行语义化接口地址，即： 对于单个查询操作，需要加参数：/graphql?query:goods 对于单个变更操作，需要加参数：/graphql?mutation:updateGood 对此，需要在每次进行graphql提交操作时，根据提交的参数进行动态修改Uri。 具体实现 引入cr
-
简介 一种用于 API 的查询语言 GraphQL 既是一种用于 API 的查询语言也是一个满足你数据查询的运行时。 GraphQL 对你的 API 中的数据提供了一套易于理解的完整描述，使得客户端能够准确地获得它需要的数据，而且没有任何冗余，也让 API 更容易地随着时间推移而演进，还能用于构建强大的开发者工具。 与RESTful区别 GraphQL 是Facebook于 2012 年在内部开发
-
安装Apollo客户端插件 npm install vue-apollo graphql apollo-client apollo-link apollo-link-http apollo-cache-inmemory graphql-tag --save 安装加载器加载graphql后缀文件 打开根目录的vue.config.js，在vueConfig（不是Ant Design Pro框架的，
-
背景 GraphQL 自诞生以来就被寄予厚望，被认为是一种有望替代 REST 的新一代服务端调用方式。 而 Apollo Federation 这个工具是对 GraphQL 的一种增强，让 GraphQL 能够更好地应用在微服务架构下。 下面就来简单分析一下，为什么要使用 GraphQL / Apollo Federation？ 为什么要用 GraphQL？ 那么，GraphQL 比 REST 好
-
GraphQL以及Apollo-GraphQL的使用（一） GraphQL 对你的 API 中的数据提供了一套易于理解的完整描述，使得客户端能够准确地获得它需要的数据，而且没有任何冗余，也让 API 更容易地随着时间推移而演进，还能用于构建强大的开发者工具。 一、GraphQL的基本使用 1.安装 npm install graphql 2.引入 const { graphql, buildSc
-
什么是GraphQL GraphQL 官方文档 Vue中项目中如何配置支持GraphQl 首先需要提前了解一下 Vue apollo Graphql 为了webpack 能够解析Graphql 文件，需要在vue.config.js文件中配置 chainWebpack: config => { config.module .use("vue-loader") .l
-
1、安装依赖 npm install --save vue-apollo graphql apollo-boost graphql-tag 2、新建graphql.js封装求情文件 // import ApolloClient from 'apollo-boost' //引入apollo-boost插件 import { ApolloClient } from 'apollo-client'
-
firebase-firestore-graphql An example of a GraphQL setup with a Firebase Firestore backend. Uses Apollo Engine/Server 2.0 and deployed to Google App Engine. Initial setup npm init --yesnpm install apo
-
express-graphql-boilerplate Express GraphQL API with JWT Authentication and support for sqlite, mysql, and postgresql Authentication via JWT Support for sqlite, mysql, and postgresql Support for graph
-
Apollo and GraphQL for Vue.js Documentation Contributing guide Sponsors
-
如果我有一个用GraphQL+Apollo+React构建的应用程序，我想知道如果我在页面上有3个组件，每个组件进行不同的查询，这是否意味着从客户端向服务器发出3个请求，并返回3个？GraphQL将API调用压缩成一个请求，但在上面的场景中，它是如何工作的，从客户端到服务器，然后服务器回到客户端？
-
我在Apollo中的GraphQL订阅遇到了麻烦。我想订阅关于主题的添加“透视图”（基本上是在帖子上添加评论），我很确定我已经正确地设置了服务器。客户才是给我带来麻烦的人。（如果这个问题看起来很熟悉，我以前问过它，以为我得到了答案，但没有去）。下面是我的订阅模式： 我也正确地连接了客户端，因为在我的终端中，我看到了“WebSocket connection Selected”消息。我被难倒的部分是
-
A React + Apollo + GraphQL GitHub Client Features React 16 with create-react-app Responsive React Router 4 Apollo with GitHub GraphQL API Queries and Mutations with render props Optimistic Updates Pag