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
This boilerplate provides a starting point for developers, especially the community of Postgraphile developers, to build applications powered by Relay Modern.
# 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
# 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
# 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 ** :)
The application is divided into three primary directories:
/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
/db folder is interesting in that it contains the migrations (i.e.
db/revert) and the sqitch.conf/sqitch.plan files
The frontend folder is further divided into three main parts:
clientis the code that renders in the browser w/o the SSR server
serveris the code that runs on the SSR server
sharedis 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 :)
The shared folder is broken up as follows:
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