Using a subzero backend with a create-react-app

[Rupert Klopper]

As discussed in the slack channel, it's not straightforward to get a create-react-app base project running that uses graphql with auth via cookies.

I played around with the cookie configuration in hooks.lua

local session_cookie = require 'subzero.jwt_session_cookie'
session_cookie.configure({
    -- rest_prefix = '/internal/rest/',
    -- login_uri = 'rpc/login',
    -- logout_uri = 'rpc/logout' ,
    -- refresh_uri = 'rpc/refresh_token',
    -- session_cookie_name = 'SESSIONID',
    -- session_refresh_threshold = (60*55) -- (expire - now < session_refresh_threshold),
    -- path = '/',
    -- domain = nil,
    -- secure = false,
    -- httponly = true,
    samesite = "Lax",
    -- extension = nil,
})

But no luck as of yet, I think after your input on the slack channel

"@tamebadger the short answer is that you are having problems because your frontend and your api live on different domains so the api domain can not set cookies for the frontend domain, plus in production you always want then on the same domain otherwise the browser will be making OPTIONS request all the time. In production, you would put your html here https://github.com/subzerocloud/subzero-starter-kit/tree/master/openresty/nginx/html so your app url will be http:/localhost:8080/ and the api endpoint http:/localhost:8080/graphql/simple. However, in development, i understand what you are asking. You want to retain the tooling and automation of create-react-app (that's why you have them on different ports). As it happens, i'll be doing exactly what you are doing in a short while so i will come up with a solution. Please leave an issue here https://github.com/subzerocloud/subzero-starter-kit and i'll come up with something"

I'll see if I can just script copying over the CRA output into the nginx/html directory for the interim ;)

[Ruslan Talpa]

It seems create-react-app have thought of this situation in development so there are configuration options available. There are two things you need to do

• start your frontend on something else besides port 3000 since that is used by postgrest container (you could also change the port for postgrest). You can do that by having "start": "set PORT=3003 && react-scripts start" (windows) in your package.json file
• tell create react app to proxy all the requests it does not know to a different url (docs here https://facebook.github.io/create-react-app/docs/proxying-api-requests-in-development) and you do that with "proxy": "http://localhost:8080"

so in other words, the package json should look similar to

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^3.9.0",
    "@material-ui/icons": "^3.0.2",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-router-dom": "^4.3.1",
    "react-scripts": "2.1.3"
  },
  "proxy": "http://localhost:8080",
  "scripts": {
    "start": "set PORT=3003 && react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

after these configuration, you can use in your frontend /graphiql/ url as your endpoint