How do I obfuscate static files generated by firebase deployment?

Question

Just wondering how I would go about obfuscating the data generated by the firebase deployment. When I run the command

npm firebase deploy

it appears to rebuild my code and then deploy it to my web app. So this means whenever I make changes or obfuscate the code manually on the build files it becomes overwritten when I decide to deploy it.

file screenshot

Tried lots of options, managed to hide src in the console but the static still exposes the JSON data I am using. I am looking to have this be hidden/obfuscated from the user.

Thanks

Answer 1

By default, Firebase Tools will deploy the public folder in your project directory as-is. It does not have a build step.

// firebase.json
{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  },
  ...
}

Assuming your file structure looks like this:

$PROJECT_DIR/
|-- functions/
|-- public/
| |-- dist/
| | |-- css/
| | | `-- ...
| | |-- js/
| | | `-- ...
| | |-- media/
| | | `-- ...
| | |-- 404.html
| | `-- index.html
| `-- src/
|   |-- components/
|   |-- assets/
|   `-- index.ts
|-- .firebaserc
|-- database.rules.json
|-- firebase.json
|-- firestore.indexes.json
`-- firestore.rules

Then you can change the deployed directory to the build directory itself:

{
  "hosting": {
    "public": "public/dist",
    ...
  },
  ...
}

However, if your code is inside your functions/ directory (as it might be if using SSR), the functions do have a predeploy build step by default (when using TypeScript as your build language or you enabled linting during setup), as defined in firebase.json . As firebase deploy deploys functions before hosting, this would mean that the files are overwritten by that build first. You can either remove all of the predeploy hooks to not use the at-deploy build step (not recommended), add your obfuscation step to your project's build script (recommended) or add the obfuscation step as its own item in the predeploy hooks (less recommended).

// firebase.json
{
  "functions": {
    "predeploy": [
      "npm --prefix \"$RESOURCE_DIR\" run lint", // runs "npm run lint" in your project's functions directory
      "npm --prefix \"$RESOURCE_DIR\" run build" // runs "npm run build" in your project's functions directory
    ]
  },
  ...
}

// functions/package.json
{
  "scripts": {
    "lint": "eslint --ext .js,.ts .",
    "build": "npm run build:src && npm run build:obfuscate",
    "build:src": "tsc",
    "build:obfuscate": "...",
    ...
  },
  ...
}

If your hosting files are not in the functions directory, you should check for the presence of predeploy hooks there too as they can be manually added in the same way:

// firebase.json
{
  "hosting": {
    "predeploy": [
      "npm --prefix \"$RESOURCE_DIR\..\" run lint", // runs "npm run lint" in your project's public directory
      "npm --prefix \"$RESOURCE_DIR\..\" run build" // runs "npm run build" in your project's public directory
    ],
    "public": "public/dist",
    ...
  },
  ...
}