Giter Site home page Giter Site logo

vuexpresso's Introduction

Vuexpresso

Vuexpresso is a skeleton app that uses the new techs like vue, vuex, graphql, webpack, apollo, between others (See complete list below).

Mainly inspired by

Getting Started

Note remember to have Mongo proccess running on the background or edit config/index.js with a cloud mongodb instance (default to localhost)

Take a look here to know how to run the mongo server

git clone https://github.com/Ethaan/vuexpresso.git
npm install -g babel-cli
yarn
yarn dev

Other Commands

yarn run storybook - Serves a play server using storybook

What includes

Graphql server

By default it runs a server on /graphql, in order to make the API calls, you can delete the part where the server is initialized on build/dev-server.js if you have an external API server

GraphiQL UI

default to /graphiql but you can change it on data/base-config.js;

Storybook UI.

It uses Storbook to render and test components much better in real time, check the official repo

Vuex Config.

Vuex is already all setup so you can only worry about adding modules, an example can be found here src/store/modules/notifications.js;

Vue Router

Routes live inside src/routes.js

Webpack

Using Webpack master example as reference, with slight modifications to make it work with ES6 and graphql

Jade & Stylus

You can easy remove Jade and stylus by simply removing them from the tag like <template lang="jade"></template => <template></template same for stylus.

Libraries and Technologies used

TODO

  • Build for Production

vuexpresso's People

Contributors

borisknot avatar dependabot-preview[bot] avatar dependabot[bot] avatar ethaan avatar sobolevn avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

vuexpresso's Issues

Mongodb connection

In config/index.js

 database: {
    mongoURL: 'mongodb://localhost:27017/example',
  },

needs to be changed to:

 database: {
    mongoURL: 'mongodb://localhost:27017/',
    name: 'databaseName',
  },

And subsequently, build/dev-server.js needs the following change:

// Create a MonboDB connection pool and start the Node.js app
MongoClient.connect(config.database.mongoURL, { promiseLibrary: Promise })
  .catch(err => console.error(err.stack))
  .then((db) => {
    app.locals.db = db; // See http://expressjs.com/en/4x/api.html#app.locals
    app.listen(port);
     
     ...

  });

to:

MongoClient.connect(config.database.mongoURL, { promiseLibrary: Promise })
  .catch(err => console.error(err.stack))
  .then((client) => {
    app.locals.db = client.db(config.database.name);
    app.listen(port);

    ...

  });

To reflect the changes made to in Mongodb v3+
Specifically:
version 3+ has connectCallback(error, client)
version 2 has connectCallback(error, db)

so there's an extra step in getting the collections.

I'd make a pull request, but I actually do not know how to do this yet.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.