Code Monkey home page Code Monkey logo

grand-stack-starter's Introduction

Deploy to now

GRANDstack Starter

This project is a starter for building a GRANDstack (GraphQL, React, Apollo, Neo4j Database) application. There are two components to the starter, the UI application (in React and Angular flavors) and the API app (GraphQL server).

Hands On With The GRANDstack Starter

Quickstart

Neo4j

You need a Neo4j instance, e.g. a Neo4j Sandbox, a local instance via Neo4j Desktop, Docker or a Neo4j instance on AWS, Azure or GCP or Neo4j Cloud

For schemas using the @cypher directive (as in this repo) via neo4j-graphql-js, you need to have the APOC library installed, which should be automatic in Sandbox, Cloud and is a single click install in Neo4j Desktop. If when using the Sandbox / cloud you encounter an issue where an error similar to Can not be converted to long: org.neo4j.kernel.impl.core.NodeProxy, Location: [object Object], Path: users appears in the console when running the React app, try installing and using Neo4j locally instead.

Sandbox setup

A good tutorial can be found here: https://www.youtube.com/watch?v=rPC71lUhK_I

Local setup

  1. Download Neo4j Desktop
  2. Install and open Neo4j Desktop.
  3. Create a new DB by clicking "New Graph", and clicking "create local graph".
  4. Set password to "letmein" (as suggested by api/.env), and click "Create".
  5. Make sure that the default credentials in api/.env are used. Leave them as follows: NEO4J_URI=bolt://localhost:7687 NEO4J_USER=neo4j NEO4J_PASSWORD=letmein
  6. Click "Manage".
  7. Click "Plugins".
  8. Find "APOC" and click "Install".
  9. Click the "play" button at the top of left the screen, which should start the server. (screenshot 2)
  10. Wait until it says "RUNNING".
  11. Proceed forward with the rest of the tutorial.

Install dependencies

(cd ./ui-react && npm install)
(cd ./ui-angular && npm install)
(cd ./api && npm install)

Start API server

cd ./api && npm start

This will start the GraphQL API in the foreground, so in another terminal session start the React UI development server:

Start the React UI server

cd ./ui-react && npm start

A UI built with Angular, Apollo and the Clarity Design System is also available.

Start the Angular UI server

cd ./ui-angular && npm start

See the project releases for the changelog.

Deployment

Zeit Now v2

Zeit Now v2 can be used with monorepos such as grand-stack-starter. now.json defines the configuration for deploying with Zeit Now v2.

  1. Set the now secrets for your Neo4j instance:
now secret add NEO4J_URI bolt+routing://<YOUR_NEO4J_INSTANCE_HERE>
now secret add NEO4J_USER <YOUR_DATABASE_USERNAME_HERE>
now secret add NEO4J_PASSWORD <YOUR_DATABASE_USER_PASSWORD_HERE>
  1. Run now

Zeit Now v1

  1. Run now in /api and choose package.json when prompted.
  2. Set REACT_APP_GRAPHQL_API based on the API deployment URL from step 1 in ui-react/.env
  3. Run now in /env and choose package.json when prompted.

Docker Compose

You can quickly start via:

docker-compose up -d

If you want to load the example DB after the services have been started:

docker-compose run api npm run seedDb

This project is licensed under the Apache License v2. Copyright (c) 2018 Neo4j, Inc.

grand-stack-starter's People

Contributors

alainlep avatar arel avatar colinskow avatar dependabot[bot] avatar dworthen avatar harlandduman avatar iamflowz avatar jexp avatar jkhaui avatar joeflack4 avatar johnymontana avatar joshwooding avatar kiwinode avatar mattgyverlee avatar moxious avatar paulogdm avatar rbonthond avatar redian avatar ruslanvs avatar s2000gan avatar tmr08c avatar voutilad avatar

Watchers

 avatar

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.