{"id":14976449,"url":"https://github.com/alex-ray/docker-postgres-react-redux-graphql-hmr-ssr-kit","last_synced_at":"2025-10-27T20:31:47.940Z","repository":{"id":68552031,"uuid":"104669589","full_name":"Alex-ray/docker-postgres-react-redux-graphql-hmr-ssr-kit","owner":"Alex-ray","description":"Production ready full stack starter kit. Featuring: Docker, Node, Postgres, Sequelize, React, Redux, GraphQL, RXjs, Webpack 3, Hot Module Reloading, Server Side Rendering and Code Splitting.","archived":false,"fork":false,"pushed_at":"2017-10-27T17:05:43.000Z","size":1422,"stargazers_count":70,"open_issues_count":0,"forks_count":4,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-02-01T08:05:45.593Z","etag":null,"topics":["codesplitting","docker","docker-compose","express","framework","graphql","hot-module-replacement","nodejs","postgresql","react","react-router-v4","redux","redux-actions","redux-observable","reselect","sequilizejs","server-side-rendering","ssl","starter-kit","webpack3"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Alex-ray.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-09-24T19:14:59.000Z","updated_at":"2024-08-10T21:41:59.000Z","dependencies_parsed_at":"2023-06-12T01:00:31.242Z","dependency_job_id":null,"html_url":"https://github.com/Alex-ray/docker-postgres-react-redux-graphql-hmr-ssr-kit","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alex-ray%2Fdocker-postgres-react-redux-graphql-hmr-ssr-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alex-ray%2Fdocker-postgres-react-redux-graphql-hmr-ssr-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alex-ray%2Fdocker-postgres-react-redux-graphql-hmr-ssr-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alex-ray%2Fdocker-postgres-react-redux-graphql-hmr-ssr-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Alex-ray","download_url":"https://codeload.github.com/Alex-ray/docker-postgres-react-redux-graphql-hmr-ssr-kit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238553192,"owners_count":19491385,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["codesplitting","docker","docker-compose","express","framework","graphql","hot-module-replacement","nodejs","postgresql","react","react-router-v4","redux","redux-actions","redux-observable","reselect","sequilizejs","server-side-rendering","ssl","starter-kit","webpack3"],"created_at":"2024-09-24T13:53:54.310Z","updated_at":"2025-10-27T20:31:42.592Z","avatar_url":"https://github.com/Alex-ray.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ⚡ 🔮 BLK STACK 🌙 ⚡\n\n## 💭 What is it?\n\nThis is a meta framework, framework. A project made up of specific technologies that are easily interchangable.\n\n*__Docker: -__* This is where our stack starts our app is split up into three containers an Nginx container for serving static files, a Node.js container for the backend and a Postgres container for our database. This also enables for cross platform development and deployment. Robust, Flexible and Dead Simple.\n\n*__Postgres: -__* The tried, trued and tested defacto databse. In this project I use the popular sequelize ORM.\n\n*__GraphQL: -__* A more effecient way to query data from a server. A better way to develop with the interactive graphql interface. This also provides an abstraction layer between our api and database that provides additional flexiblity if we every need to swap it out.\n\n*__React, Redux, React Router: -__* At this point its almost and industry standard. Undirectional data flow, fast render times and extremely flexible.\n\n*__Redux Observables (Rxjs): -__* RxJS 5-based middleware for Redux. Compose and cancel async actions to create side effects and more.\n\n*__Server Side Rendering: -__* We use server side rending by utilizing Universal javascript on the Node.js server. Because were using React its simply a matter of rendering React views on the server.\n\n*__Code Splitting: -__* Split code into bundles so that code is asynchronously loaded by the client.\n\n*__Hot Module Reloading: -__* Replaces modules that have been changed in real time while preserving the state.\n\n## ⚙ How?\n\nThe application works like this.\n\nWe use shell scripts to handle docker and related tasks, these are located in the `bin` directory. e.x. `./bin/develop.sh` or `./bin/deploy.sh` (more details on this below)\n\nThe shell scripts sets up our docker containers, migrates the database, installs dependencies, compiles source code and launches our servers.\n\nThe Nginx server handles static file requests and the Node.js Express server handles all other request. When a request is made we render our React application on the server based on that route and return the output as a html.\n\nOnce the Html is sent to the client our React application takes over.\n\nOn build our application is split up into bundles for each route. Only that routes bundle is served to the client; when a new route is entered a new bundle is requested and sent to the client.\n\nIn addition our core dependencies are split into a seperate bundles and cached our our Nginx server. Everything is fingerprinted.\n\nWhen developing we spin up a seperate frontend server that handles hot module reloading.\n\nOn a more techinical note we use all sorts of goodies that I leave you to explore, things like `reselect`, `redux-actions`, `immutablejs`, `cssnext`, `react-router-redux` etc...\n\nLast but not least I have to give a huge shout out to @Producters for the https://github.com/Producters/docker-node-react-starter which is what this project is based off of.\n\n## 🛠 Setup\nGet latest docker (1.11+) \u0026 docker-compose (1.7+):  \nhttps://www.docker.com/  \nhttps://docs.docker.com/compose/\n\nPull down the repository:\n```sh\ngit clone git@github.com:Alex-ray/docker-postgres-react-redux-graphql-hmr-ssr-kit.git\n```\n\nStart the dev server:\n```sh\n./bin/develop.sh\n```\nWait for docker to set up dev env, then open [http://localhost:8000](http://localhost:8000)\n\n## production mode\n\n```sh\n# build production images, create db backup \u0026 start\n./bin/deploy.sh\n\n# stop server\n./bin/stop_production.sh\n\n# start srever\n./bin/start_production.sh\n```\n\nIn prod mode sources are added to docker image rather than mounted from host. Nginx serves static files, proxy pass to node for app. Logs in `logs` dir.\n\n#### enable ssl\nCopy your .key and .crt files to `nginx/ssl` and run `./bin/deploy.sh`.\n\n## install dependencies\n\n```sh\n# frontend\n./bin/npm_frontend.sh install [package] --save-dev\n\n# backend\n./bin/npm_backend.sh install [package] --save\n```\n\n## database management\n\n```sh\n# open psql session\n./bin/psql.sh\n\n# create a backup in backups dir\n./bin/backup.sh\n\n# restore from a backup in backups dir (server must be stopped)\n./bin/restore.sh backups/somebackup.bak\n```\n\n## layout\n\n```\nbin/                          - various utility scripts\n\ndocker-compose.yml            - base docker compose config\ndocker-compose.overrides.yml  - development docker compose config\ndocker-compose.production.yml - production docker compose config\n\nfrontend/                     - frontend stuff\nfrontend/package.json         - npm package file with frotnend dependencies\nfrontend/dist/                - compiled and production ready client side code\nfrontend/universal/           - universal javascript code\nfrontend/index.js             - js entry point. include other js deps here\n\nbackend/                      - backend stuff\nbackend/lib/                  - node app\nbackend/lib/index.js          - entry point\nbackend/lib/models/           - sequelize model definitions\nbackend/lib/migrations/       - sequelize migrations\nbackend/config/               - config\nbackend/config/default.json   - config defaults\nbackend/views/                - pug templates\nbackend/Dockerfile            - production build dockerfile\nbackend/media/                - user uploads @TODO\nbackend/package.json          - npm pacakge file with backend \u0026 test depos\nbackend/nightwatch.json       - nigthwatch config\nbackend/tests/specs/*         - nightwatch test specs\n\nlogs/                         - in prod mode app, nginx logs go here\nnginx/                        - nginx stuff for prod mode\nnginx/ssl/                    - put key \u0026 cert here if you use ssl\nnginx/nginx_nossl.conf        - nginx conf if no ssl is used\nnginx/nginx_ssl.conf          - nginx conf for deploy with ssl\n```\n\n## config\n\nConfig files for backend are located at `config/*.json`.  \nIf `config/[NODE_ENV].json` exists, values are loaded from it first. Then defaults are filled in from `config/default.json`;\n\n## logging\n\n[Winston](https://github.com/winstonjs/winston) is used for logging. Loggers and transport are configured via config files, see `config/default.json`.\n\n\n```js\nimport logger, {getLogger} from 'winston';\n\n//default logger\nlogger.info('logging to default');\nlogger.error('bad thing happened');\n\n\n//custom logger, define transports in config\nlet netlogger = getLogger('network');\nnetlogger.info('network stuff');\n```\n\n## migrations\n\n```sh\n# create new migration\n./bin/sequelize.sh migration:create --name some_migration\n\n# run migrations\n./bin/sequelize.sh db:migrate\n```\n\n## tests\n\ne2e tests are implemented using [nightwatch.js](http://nightwatchjs.org/). Test specs are located at `backend/tests/specs/`\n\n```sh\n\n#run tests\n./bin/test.sh\n\n# skip frontend build (eg, running tests repeatedly)\n./bin/test.sh --skipbuild\n\n# keep selenium, vnc server \u0026 database running after tests end\n# for fast next run \u0026 to keep vnc from disconnecting if debuggin\n./bin/test.sh --dontstop\n\n# run a particular test file only\n./bin/test.sh -- --test tests/specs/auth.js\n\n# run particular test case only\n./bin/test.sh -- --test tests/specs/auth.js --testcase 'User can login via auth0'\n\n```\n\nTo debug tests it's possible to vnc into selenium container while its running at localhost:5900 and view the browser. Password is `secret`.\n\n```sh\nsudo apt-get install vinagre # vnc client\n\nvinagre localhost:5900\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falex-ray%2Fdocker-postgres-react-redux-graphql-hmr-ssr-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falex-ray%2Fdocker-postgres-react-redux-graphql-hmr-ssr-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falex-ray%2Fdocker-postgres-react-redux-graphql-hmr-ssr-kit/lists"}