Deploying to gh-pages + firebase / now

If you have been deploying to gh pages for development and firebase or zeit.co's now from the same project, you may have come across the issue of setitng your "homepage": "." key.

gh pages requires that key to point to the right relative path, while firebase and now doesn't (if you deploy to the main github.io page then you don't either, but this applies to other gh pages deployments)

so CRA doesn't tell you what "homepage" does

CRA's deployment page explains using "homepage" to set your relative path for builds.

But what does it do?

TLDR: it sets your PUBLIC_URL environment variable. essentially

{"homepage": "https://username.github.io/repo-name"} 
== 
`PUBLIC_URL=https://username.github.io/repo-name`

deploy to both firebase and gh-pages without deleting "homepage" and pasting it back all the time

go from:

{
    ...//your code
    "scripts": {
        "predeploy": "npm run build"
    }
}

to this

{
    ...// your code
    "scripts": {
        "predeploy": "PUBLIC_URL=https://username.github.io/repo-name/ npm run build"
    }
}

and now you can happily delete your "homepage" key from your package.json.

and you can now run yarn deploy (for gh pages) and yarn firebase-deploy (or some other name) for your firebase deployment! they will never step on each other's toes again.

oh so actually CRA tells you what it does

here under advanced configuration under PUBLIC_URL.

for reference

{
  "name": "your-project",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "firebase": "^5.7.2",
    "react": "^16.8.3",
    "react-app-polyfill": "^0.1.3",
    "react-dom": "^16.8.3",
    "react-scripts": "2.0.3",
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "predeploy": "PUBLIC_URL=https://username.github.io/repo-name/ npm run build ",
    "deploy": "gh-pages -d build",
    "fserve": "firebase serve",
    "fdeploy": "firebase deploy"
  },
  "devDependencies": {
    "gh-pages": "^2.0.1"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}