Remove Styled Components; add .env/.env.production

.babelrc

@@ -2,7 +2,6 @@
   "presets": ["react-app-tools/config/babel"],
   "plugins": [
     ["babel-plugin-lodash", { "id": ["lodash", "recompose"] }],
-    "babel-plugin-relay",
-    "babel-plugin-styled-components"
+    "babel-plugin-relay"
   ]
 }

.circleci/config.yml

@@ -6,7 +6,7 @@ version: 2
 jobs:
   build:
     docker:
-      - image: kriasoft/node:10.1.0
+      - image: circleci/node:carbon
     steps:
       - checkout
       - restore_cache:

.env

@@ -1,15 +1,17 @@
-# Firebase
+# Google Cloud & Firebase
+# https://console.cloud.google.com/apis/credentials
 # https://console.firebase.google.com/project/_/settings/general/
 # https://console.firebase.google.com/project/_/settings/serviceaccounts/adminsdk
 
-FIREBASE_PROJECT_ID=react-firebase-graphql
+GCP_PROJECT=react-firebase-graphql
+GCP_BROWSER_KEY=AIzaSyAsuqpqt29-TIwBAu01Nbt5QnC3FIKO4A4
+GCP_SERVER_KEY=AIzaSyAsuqpqt29-TIwBAu01Nbt5QnC3FIKO4A4
+# GCP_SERVICE_KEY={"type":"service_account","project_id":"react-firebase-graphql","private_key_id":"...","private_key":"...","client_email":"...","client_id":"...","auth_uri":"https://accounts.google.com/o/oauth2/auth","token_uri":"https://accounts.google.com/o/oauth2/token","auth_provider_x509_cert_url":"https://www.googleapis.com/oauth2/v1/certs","client_x509_cert_url":"..."}
 FIREBASE_AUTH_DOMAIN=firebase.reactstarter.com
-FIREBASE_API_BROWSER_KEY=AIzaSyAsuqpqt29-TIwBAu01Nbt5QnC3FIKO4A4
-FIREBASE_API_SERVER_KEY=AIzaSyAsuqpqt29-TIwBAu01Nbt5QnC3FIKO4A4
-FIREBASE_SERVICE_KEY={"type":"service_account","project_id":"react-firebase-graphql","private_key_id":"...","private_key":"...","client_email":"...","client_id":"...","auth_uri":"https://accounts.google.com/o/oauth2/auth","token_uri":"https://accounts.google.com/o/oauth2/token","auth_provider_x509_cert_url":"https://www.googleapis.com/oauth2/v1/certs","client_x509_cert_url":"..."}
 
 # Authentication
 
+JWT_NAME=__session_rsk
 JWT_SECRET=xxxxx
 
 GOOGLE_CLIENT_ID=xxxxx
@@ -25,8 +27,9 @@ PGHOST=localhost
 PGUSER=postgres
 PGDATABASE=app
 PGPASSWORD=
-PGPORT=5432
+PGAPPNAME=rsk
 # PGSSLMODE=require
 # PGSSLCERT=./ssl/client-cert.pem
 # PGSSLKEY=./ssl/client-key.pem
 # PGSSLROOTCERT=./ssl/server-ca.pem
+# PGDEBUG=true

.env.production

@@ -0,0 +1,30 @@
+# Google Cloud & Firebase
+# https://console.cloud.google.com/apis/credentials
+# https://console.firebase.google.com/project/_/settings/general/
+# https://console.firebase.google.com/project/_/settings/serviceaccounts/adminsdk
+
+GCP_PROJECT=react-firebase-graphql
+GCP_BROWSER_KEY=AIzaSyAsuqpqt29-TIwBAu01Nbt5QnC3FIKO4A4
+GCP_SERVER_KEY=AIzaSyAsuqpqt29-TIwBAu01Nbt5QnC3FIKO4A4
+# GCP_SERVICE_KEY={"type":"service_account","project_id":"react-firebase-graphql","private_key_id":"...","private_key":"...","client_email":"...","client_id":"...","auth_uri":"https://accounts.google.com/o/oauth2/auth","token_uri":"https://accounts.google.com/o/oauth2/token","auth_provider_x509_cert_url":"https://www.googleapis.com/oauth2/v1/certs","client_x509_cert_url":"..."}
+FIREBASE_AUTH_DOMAIN=firebase.reactstarter.com
+
+# Authentication
+
+JWT_NAME=__session
+JWT_SECRET=xxxxx
+
+GOOGLE_CLIENT_ID=xxxxx
+GOOGLE_CLIENT_SECRET=xxxxx
+
+FACEBOOK_APP_ID=xxxxx
+FACEBOOK_APP_SECRET=xxxxx
+
+# PostgreSQL
+# https://www.postgresql.org/docs/current/static/libpq-envars.html
+
+PGHOST=/cloudbuild/<project-id>:<region>:<db-instance>
+PGUSER=<user>
+PGDATABASE=<database>
+PGPASSWORD=<password>
+PGAPPNAME=rsk

.firebaserc

@@ -1,6 +1,5 @@
 {
   "projects": {
-    "prod": "react-firebase-graphql",
-    "dev": "react-firebase-dev"
+    "default": "react-firebase-graphql"
   }
 }

README.md

@@ -32,7 +32,6 @@ This project was bootstraped with [React Starter Kit for Firebase][rfs] by [Kria
 
 - [Create React App][cra] (★ 55k) for development and test infrastructure (see [user guide][cradocs])
 - [Material UI][mui] (★ 40k) to reduce development time by integrating Google's [Material Design][material]
-- [Styled Components][sc] (★ 18k) for component friendly CSS styles with a great DX ([docs][scdocs])
 - [Passport.js][passport] (★ 14k) for authentication configured with stateless JWT tokens for sessions
 - [GraphQL.js][gqljs] (★ 11k) and [Relay][relay] (★ 11k) for declarative data fetching and efficient client stage management
 - [Universal Router][router] (★ 1k) + [history][history] (★ 3k) for declarative routing and client-side navigation optimized for [Relay][relay]
@@ -131,18 +130,11 @@ $ yarn test                        # Run unit tests. Or, `yarn test -- --watch`
 ### How to Deploy
 
 1.  Create a new **Google Cloud** project and **Cloud SQL** database.
-2.  Open your Google Cloud project in **Firebase** dashboard and configure Facebook authentication.
-3.  Update Firebase project IDs for production and development environments in `.firebaserc` file.
-4.  Save Firebase API key, authentication domain and GPC service key in Firebase Functions
-    environment. For example `firebase functions:config:set api.browserkey="..." auth.domain="..."`
-5.  Update database host/user/password in either `.env` or `.env.local` file and migrate your
-    Cloud SQL database schema to the latest version by running `yarn db-migrate`.
-6.  Finally, deploy your application by running:
-
-```bash
-$ yarn deploy                      # Build the app and deploy to development environment
-$ yarn deploy-prod                 # Build the app and deploy to production
-```
+2.  Configure authentication in **Firebase** dashboard.
+3.  Set Firebase project ID in `.firebaserc` file.
+4.  Set API keys, secrets and other settings in `.env.production` file.
+5.  Migrate the database by running `NODE_ENV=production yarn db-migrate`.
+6.  Finally, deploy your application by running `yarn deploy`.
 
 ### How to Update
 
@@ -221,8 +213,6 @@ and [contributors](https://github.com/kriasoft/react-firebase-starter/graphs/con
 [fbdocs]: https://firebase.google.com/docs/web
 [router]: https://github.com/kriasoft/universal-router
 [history]: https://github.com/ReactTraining/history
-[sc]: https://www.styled-components.com/
-[scdocs]: https://www.styled-components.com/docs
 [nodejs]: https://nodejs.org/
 [yarn]: https://yarnpkg.com/
 [brew]: https://brew.sh/

firebase.json

@@ -12,15 +12,22 @@
       "scripts",
       "seeds",
       "src",
-      ".*",
-      "config-overrides.js",
+      ".babelrc",
+      ".editorconfig",
+      ".eslintrc",
+      ".firebserc",
+      ".flowconfig",
+      ".gitattributes",
+      ".gitignore",
+      ".prettierignore",
+      ".prettierrc",
       "knexfile.js",
       "LICENSE.txt",
       "README.md",
       "schema.graphql",
       "storage.rules",
-      "stylelint.config.js",
-      "*.log"
+      "yarn-debug.log*",
+      "yarn-error.log*"
     ]
   },
   "hosting": {

migrations/20180101000000_initial.js

@@ -7,6 +7,9 @@
 /* prettier-ignore */
 
 exports.up = async db => {
+  await db.raw('CREATE EXTENSION IF NOT EXISTS "uuid-ossp"');
+  await db.raw('CREATE EXTENSION IF NOT EXISTS "hstore"');
+
   await db.schema.createTable('users', table => {
     table.uuid('id').notNullable().defaultTo(db.raw('uuid_generate_v4()')).primary();
     table.string('username', 50).unique();

package.json

@@ -23,18 +23,19 @@
     "@babel/polyfill": "^7.0.0-beta.46",
     "@babel/runtime": "^7.0.0-beta.46",
     "@firebase/app": "^0.3.3",
-    "@material-ui/core": "^1.4.3",
-    "@material-ui/icons": "^2.0.1",
+    "@material-ui/core": "^3.0.2",
+    "@material-ui/icons": "^3.0.1",
     "body-parser": "^1.18.3",
     "classnames": "^2.2.6",
     "cookie": "^0.3.1",
     "cookie-parser": "^1.4.3",
+    "dotenv": "^6.0.0",
     "ejs": "^2.6.1",
     "express": "^4.16.3",
     "express-graphql": "^0.6.12",
     "firebase-admin": "^6.0.0",
-    "firebase-functions": "^2.0.4",
-    "graphql": "^0.13.2",
+    "firebase-functions": "^2.0.5",
+    "graphql": "^14.0.2",
     "graphql-relay": "^0.5.5",
     "history": "^4.7.2",
     "hoist-non-react-statics": "^3.0.1",
@@ -50,52 +51,42 @@
     "pg": "^7.4.3",
     "prop-types": "^15.6.2",
     "query-string": "^6.1.0",
-    "react": "^16.4.2",
-    "react-dom": "^16.4.2",
-    "react-relay": "^1.6.2",
-    "recompose": "^0.28.2",
-    "relay-runtime": "^1.6.2",
+    "react": "^16.5.0",
+    "react-dom": "^16.5.0",
+    "react-relay": "^1.7.0-rc.1",
+    "recompose": "^0.30.0",
+    "relay-runtime": "^1.7.0-rc.1",
     "request": "^2.88.0",
     "request-promise-native": "^1.0.5",
     "serialize-javascript": "^1.5.0",
     "slug": "^0.9.1",
-    "styled-components": "^3.4.2",
     "universal-router": "^6.0.0",
     "uuid": "^3.3.2",
-    "validator": "^10.5.0"
+    "validator": "^10.7.1"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-beta.46",
     "@babel/preset-flow": "^7.0.0-beta.46",
     "@babel/register": "^7.0.0-beta.46",
     "babel-plugin-lodash": "^3.3.4",
-    "babel-plugin-relay": "^1.6.2",
-    "babel-plugin-styled-components": "^1.5.1",
+    "babel-plugin-relay": "^1.7.0-rc.1",
     "chai": "^4.1.2",
-    "dotenv": "^6.0.0",
-    "eslint-config-prettier": "^2.9.0",
+    "eslint-config-prettier": "^3.0.1",
     "eslint-plugin-flowtype": "^2.50.0",
     "eslint-plugin-prettier": "^2.6.2",
-    "flow-bin": "^0.78.0",
-    "husky": "^0.15.0-rc.13",
-    "lint-staged": "^7.2.0",
+    "flow-bin": "^0.80.0",
+    "husky": "^1.0.0-rc.13",
+    "lint-staged": "^7.2.2",
     "minimist": "^1.2.0",
     "prettier": "^1.14.2",
     "raw-loader": "^1.0.0-beta.0",
-    "react-app-tools": "^3.0.4",
-    "relay-compiler": "^1.6.2",
-    "stylelint": "^9.4.0",
-    "stylelint-config-primer": "^2.2.10",
-    "stylelint-config-standard": "^18.2.0",
-    "stylelint-config-styled-components-processor": "^0.1.1",
-    "stylelint-order": "^1.0.0",
-    "stylelint-processor-styled-components": "^1.3.2"
+    "react-app-tools": "^3.0.6",
+    "relay-compiler": "^1.7.0-rc.1"
   },
   "lint-staged": {
     "*.js": [
       "yarn run eslint --no-ignore --fix --max-warnings=0",
       "yarn run prettier --write",
-      "yarn run stylelint",
       "git add --force"
     ],
     "*.json": [
@@ -110,13 +101,13 @@
   },
   "scripts": {
     "update-schema": "node ./scripts/update-schema",
-    "relay": "relay-compiler --src ./src --schema ./schema.graphql --include \"**/*.js\"",
+    "relay": "relay-compiler --src ./src --schema ./schema.graphql",
     "setup": "node ./scripts/setup",
     "prestart": "yarn relay",
     "start": "react-app start",
     "build": "react-app build",
     "test": "react-app test --env=jsdom",
-    "lint": "eslint --ignore-path .gitignore --ignore-pattern \"!**/.*\" . && stylelint \"src/**/*.js\"",
+    "lint": "eslint --ignore-path .gitignore --ignore-pattern \"!**/.*\" .",
     "lint-fix": "eslint --ignore-path .gitignore --ignore-pattern \"!**/.*\" --fix . && yarn run prettier --write \"**/*.{js,json}\"",
     "db": "node ./scripts/db",
     "db-save": "node ./scripts/db-save",