https://github.com/nielsdejong/grandstack-for-dummies
A super stripped grandstack app for Neo4j
https://github.com/nielsdejong/grandstack-for-dummies
Last synced: about 2 months ago
JSON representation
A super stripped grandstack app for Neo4j
- Host: GitHub
- URL: https://github.com/nielsdejong/grandstack-for-dummies
- Owner: nielsdejong
- Created: 2020-04-06T09:24:05.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2020-05-28T13:38:20.000Z (about 5 years ago)
- Last Synced: 2025-02-10T06:12:09.637Z (4 months ago)
- Language: JavaScript
- Size: 211 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## grandstack-for-dummies
This project aims to provide a super simple starting point for Grandstack apps.
Consider this a starting point for those not familiar with React, Apollo or GraphQL.
It's essentially a stripped down version of the [grand-stack-starter](https://github.com/grand-stack/grand-stack-starter) repo - *by no means a replacement*, but more of a simple way to familiarize with the format.
## Dependencies
`(npm == 6.14.4 && node == 13.12.0)`
## Installation
### Part 1 - Setting up Apollo & the GraphQL API
First we set up the GraphQL/Apollo API layer. We can test this independently using the inbuilt graphQL playground. In my example, I'm using the movies database (generated by `:play movies`).
1. Get yourself a Neo4j instance (3.5.12).
2. Set up the `api/.env` file to point to your instance.
```
NEO4J_URI=bolt://localhost:7687
NEO4J_USER=neo4j
NEO4J_PASSWORD=sunshine
```
3. Define a GraphQL schema that maps your Neo4j data to JSON. See `schema.graphql` for examples on the movie graph.
4. Install the npm packages (`cd api && npm i`)
5. Run the app in development mode (`npm start`)
6. Try out some GraphQL queries. For example:
```
{
m: Movie(title: "The Matrix") {
title
actors {
name
}
avgRating
}
}
```
## Part 2 - setting up the React Front-End
1. Install the npm packages (`cd ui && npm i`)
2. Run the app in development mode (`npm start`)
## Project Structure
| File/Folder | Description |
|--------------------------------|--------------------------------------------------------------------------------------|
| `api` | Main folder for the Apollo / GraphQL API layer. |
| `api/src` | ____ Source files for the Apollo application. |
| `api/src/index.js` | ________ Sets up an express.js app that managed the API. |
| `api/src/schema.graphql` | ________ The schema that maps Cypher to GraphQL. |
| `api/.env` | ____ Environment variables (settings) for the API layer. |
| `api/package.json` | ____ Node dependencies for API Layer. |
| `ui` | Main folder for the UI layer. |
| `ui/public` | ____ Folder that contains the HTML files. |
| `ui/src` | ____ Source files for the React application. |
| `ui/src/index.js` | ________ Sets up the React App. |
| `ui/src/registerServiceWorker.js` | ________ a javascript service worker to serve assets from local cache. |
| `ui/.env` | ____ Environment variables (settings) for the UI layer. |
| `ui/package.json` | ____ Node dependencies for the UI Layer.