Git Product home page Git Product logo

rpg-boilerplate's Introduction

RPG Boilerplate

Relay, PostgreSQL, Graphile (GraphQL)

Danger: This boilerplate is outdated and should only be used for inspiration

There is an effort underway to revamp the boilerplate, and you can contribute to the new boilerplate here: https://github.com/clevertech/boilerplate/tree/rpg-next

A Modern Frontend and API Boilerplate

This boilerplate provides a starting point for developers, especially the community of Postgraphile developers, to build applications powered by Relay Modern.

GraphQL and Relay Modern allow fast, modular apps. For more on how they work, check out the respective links.


Requirements

Things to change

  • copy rpg-boilerplate/example_docker-compose.yml to rpg-boilerplate/docker-compose.yml
  • Set the secrets in the docker-compose.yml file
  • copy api/env_example to api/.env
  • Set the secret in api/.env
  • copy the frontend/example_certs and api/example_certs to frontend/certs and api/certs respectively
  • Re-generate the frontend/certs and api/certs:
# to regenerate the certs:
sudo openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout rpg-boilerplate/frontend/certs/cert.key -out rpg-boilerplate/frontend/certs/cert.crt
sudo openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout rpg-boilerplate/api/certs/cert.key -out rpg-boilerplate/api/certs/cert.crt

Note: you'll likely want to explore the components and views to implement further changes. See below for tips on development using this boilerplate

Installation

# clone down the code
git clone https://github.com/chadfurman/rpg-boilerplate.git

# enter into the folder
cd rpg-boilerplate

# install dependencies
yarn install

# start docker to prep db
cd rpg-boilerplate && docker/run.sh

# after db init runs, docker will hang -- this is fine pending the next step
# in a new terminal, deploy migrations to db
cd rpg-boilerplate/db && sqitch deploy

# once migrations finish, ctrl-c docker-compose:
# you can now re-run when you are ready and everything should work
cd rpg-boilerplate && docker/run.sh

# navigate to https://localhost:3001/graphiql to verify API running
# navigate to https://localhost:3000/ to verify front-end running

Running

# Start the app
cd rpg-boilerplate
docker/run.sh

Note: The API and the Frontend SSR server both use HTTPS -- there should be a redirect, but at the moment it's not working. ** MAKE SURE YOU USE HTTPS ** :)

Development

Overview

The application is divided into three primary directories: /api, /frontend, and /db

The /api folder contains the src of our GraphQL api -- if you look, you'll notice it simply attaches postgraphile and passes in our config from api/.env

the /db folder is interesting in that it contains the migrations (i.e. db/deploy / db/revert) and the sqitch.conf/sqitch.plan files

The frontend folder is further divided into three main parts:

  • client is the code that renders in the browser w/o the SSR server
  • server is the code that runs on the SSR server
  • shared is the code that runs on both, and is responsible for the UI of the website.

NOTE: Given that the frontend client and server folders are pretty barren and the code therein is somewhat straight-forward, they do not require much explanation. Take a look and see :)

Shared Folder

The shared folder is broken up as follows:

  • components - these are the bulk of the UI elements of the site. Each component stores its own stylesheet, images, JavaScript, and data dependency declarations
  • relay - houses the apiManager (sets/cancels our JWT during transit) and all of our mutations (queries are built into the components)
  • routes - Each route file must be manually linked in routes.js -- more on routes below.
  • templates - These are the general skeleton elements that multiple views will share
  • theme - this folder contains global assets (like a background, not like a logo), and global CSS (reset rules, utility styles, scss variabls)
  • views - these are the root component rendered for a route. Each route has a view. Each view is used by only one route. Reusable aspects of views should be components.
  • App.js - This separates public and private routes from eachother, querying for the currentProfile to determine if we're logged in or not.
  • BaseError.js - An extensible error class
  • routes.js - exports an array of imported route files to be matched by the SSR server and iterated over in App.js

How to add a new route

TODO

How to add a new mutation

TODO

How to add a new component

TODO

How to add a new view

TODO

How to add a new migration

TODO

How to rework an existing migration

TODO

How to extend the GraphQL API

TODO

rpg-boilerplate's People

Contributors

benjie avatar chadfurman avatar donnycrash 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

Watchers

 avatar  avatar  avatar

rpg-boilerplate's Issues

Unable to deploy sqitch database (--username requires a value!)

Having followed the steps in repo readme, when trying to deploy the sqitch database i get:

> cd rpg-boilerplate/db && sqitch deploy
Adding registry tables to db:pg://postgres:@localhost:8001/localdb
2018-02-26 03:42:47.209 GMT [57365] FATAL:  --username requires a value
"/usr/local/bin/postgres" unexpectedly returned exit value 1

What am i missing?

In need of updates

Things are out of date and are causing problems:

  • node 8 -> 10
  • postgres 9 -> 11
  • docker-compose.yml -> v3
warning "[email protected]" has incorrect peer dependency "babel-eslint@^7.2.3".
warning "[email protected]" has unmet peer dependency "eslint-plugin-babel@^4.1.1".
warning "[email protected]" has unmet peer dependency "[email protected]".
warning "[email protected]" has incorrect peer dependency "lodash@^4.17.0".
warning "[email protected]" has incorrect peer dependency "babel-runtime@^6.23.0".
warning "[email protected]" has incorrect peer dependency "ajv@>=4.10.0".
warning "[email protected]" has incorrect peer dependency "babel-eslint@^7.2.3".
warning "[email protected]" has incorrect peer dependency "eslint-plugin-jsx-a11y@^5.1.1".
warning "[email protected]" has unmet peer dependency "node-sass@^4.0.0".
warning "[email protected]" has incorrect peer dependency "[email protected] - 3.x".
warning "[email protected]" has incorrect peer dependency "eslint@^2.0.0 || ^3.0.0".
warning "[email protected]" has incorrect peer dependency "ajv@>=5.0.0".
warning "[email protected]" has incorrect peer dependency "graphql@>=0.9 <1".
warning "[email protected]" has incorrect peer dependency "pg@>=6 <7".
warning "[email protected]" has incorrect peer dependency "graphql@>=0.9 <1".
warning "[email protected]" has incorrect peer dependency "graphql@^0.5.0 || ^0.6.0 || ^0.7.0 || ^0.8.0-b || ^0.9.0 || ^0.10.0 || ^0.11.0".
warning "[email protected]" has incorrect peer dependency "graphql@>=0.4.0".

Fix SSR server

Right now, the SSR server is quite broken. Relay does not fire queries in the backend. This causes the frontend to flash a background image (#23) and then show content. On other sites, this renders as a progress bar (depending on how you change App.js etc)

Ultimately, the SSR server is the one responsible for displaying the content correctly. Additional improvements to page rendering can be achieved in another ticket by separating the header from the routing layer in the private / public templates. At that point, the SSR server would render everything and show it to the client, who would then only make small network requests, using the pre-rendered relay query (or environment?) cache...

Meta-tags on rendered template

Add better metatags on rendered template. Especially once we start adding in OAuth etc -- getting social media references and more in the template is great, as is a description field, etc.

migrations prefix w/ rework?

@benjie when you re-work a migration in sqitch, it keeps its original name and yet gets added to the end of the sqitch.plan -- I'm not convinced that the numeric prefix on the migrations is appropriate.

Prefixing the migrations with their type allows cleaner organization of the deploy folder. Inside the migrations there are also dependencies (albeit not all of them) outlined at the top of the files.

The exact order of the existing migrations is less important to someone wanting to make changes than having the files grouped nicely by their type (and also easily re-workable)

I'm going to change the migrations back, unless you have a compelling reason why they should be prefixed?

Add generators for components etc

There should be a command to allow you to quickly create a table, function, schema, type, component, mutation, or route.

any migration file lists out other migrations and lets you check off depencies (similar to yarn upgrade-interactive), and then adds a migration of the form _<_optional> to the plan

Components generate the folder, the js file (along with a basic component boilerplate), the css file, and a basic Jest snapshot test

routes generate the route file, optionally add the file to routes.js, generate the view file similar to the component, and prompt for a root query for the route (or generating a commented out root query example and mentioning that the user must change it)

Generating a mutation creates the file in shared/relay/mutations

dep versions

from @benjie 8b54ee8#commitcomment-24551011

I recommend considering adding engines: { yarn: ">= 1.0.2", node: ">=4" } to the package.json; yarn for stable workspaces support (it was a bit flakey in 1.0.1 and below) and node because it's the min version for PostGraphile.

How to use multiple schemas?

I've inserted a couple of tables to the public and want to use it in the api.
Related to this It sould be possible as simple as

May be an array for multiple schemas.

app.use(postgraphile(pgConnectionString, [pgSchemas, pgSchemasPublic], pgOptions)) but it does not work for me.
How can I use the public schema in this case?
`import express from 'express'
import postgraphile from 'postgraphile'

const app = express()
const pgConnectionString = process.env.DB_URI
const pgSchemas = process.env.POSTGRAPHILE_SCHEMAS.split(',')
const pgSchemasGramm = process.env.POSTGRAPHILE_SCHEMAS_PUBLIC.split(',')
const pgOptions = JSON.parse(process.env.POSTGRAPHILE_OPTIONS)

app.use(postgraphile(pgConnectionString, [pgSchemas, pgSchemasPublic], pgOptions))

app.listen(3000, '0.0.0.0', function () {
console.info('NODE_ENV: ' + process.env.NODE_ENV)
console.info('Postgraphile API started.\n')
})`

How can I connect to the DB Docker port?

I know that we can do cd db && docker exec -it 742ea7492eb1 /bin/sh but how for example we can connect IDE?

[08001] Connection to localhost:5432 refused. Check that the hostname and port are correct and that the postmaster is accepting TCP/IP connections.

742ea7492eb1 rpgboilerplate_db "docker-entrypoint.sā€¦" 4 minutes ago Up 4 minutes 0.0.0.0:8001->5432/tcp rpgboilerplate_db_1

ports:
- '8001:5432'

screen shot 2018-02-09 at 8 01 56 pm

Need Deployment (AWS) docs

I'm trying to run this project on ECS.
My steps
1 Cluster created ( Registered container instances 5? do we need 4 or 5)
2 Created repositories for api, frontend, db
3 Builded 3 images from individual folder cd api && docker build -t the_api .
4 docker push :latest
I'm here for now

Can any one help with following questions

  • Do we need to build nginx image and upload it to ECS?

  • How to start all tasks on server? (Like as usual through the Task Definition?)

  • Any related AWS/ECS multiple containers tutorials appreciated (I'm personally lost)

Why do we need to mount volumes to the frontend and api?

I'm working now to make it run on aws ecs and I have some troubles to mount volumes to containers
Why do we need to copy folders(Dockerfile) to the Image build
COPY . /opt/app COPY . /opt/frontend
and also mount volumes from yml
volumes: - ./frontend/.:/opt/frontend - /opt/frontend/node_modules volumes: - ./api/.:/opt/app - /opt/app/node_modules
also we copy api and all files and next api/node_modules, is it right?
For me it's looks redundant.

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.