Objective:
I am aiming to integrate Google's TypeScript style guide, gts, into my Firebase Functions project.
Desired Outcome:
I expect that executing the command firebase deploy --only functions will successfully deploy my functions even after initializing gts with npx gts init.
Actual Outcome:
Unfortunately, the deployment of my functions fails despite addressing several noticeable issues.
Steps to Replicate:
- Start the Firebase functions project by running
firebase init functionswithin an empty directory. - Add the relevant function code to the
src/directory. - Execute either the
"deploy"script orfirebase deploy --only functionsin the terminal.- Outcome: Functions are deployed without any complications.
- Run
npx gts initin thefunctions/directory to initialize gts. - Execute either the
"deploy"script orfirebase deploy --only functionsin the terminal.- Outcome: Deployment fails with the following error:
- Error: There was an issue reading functions\package.json:
functions\lib\index.js does not exist, preventing Cloud Functions deployment
- Error: There was an issue reading functions\package.json:
- Outcome: Deployment fails with the following error:
- Rectify the directory mismatch.
- Outcome: Deployment still fails with the same error.
- Correct the location of
"main".- Outcome: Deployment fails again with the error message stating 'npm.cmd: not found'.
- Solve the 'npm.cmd: not found' error by removing '.cmd' from scripts.
- Outcome: Deployment encounters a new error -
tsc: not found
- Outcome: Deployment encounters a new error -
The structure and contents of important project files at various critical stages are outlined below.
Although detailed, I believe it is crucial to present potentially relevant information.
After initiating the Firebase functions project but before integrating gts:
The project adheres to the standard Firebase Functions layout.
my-project
+- functions/ # Folder containing function code
|
+- lib/
| |
| +- index.js # Transpiled JavaScript code
| |
| +- index.js.map # Source map for debugging
|
+- src/ # TypeScript source folder
| |
| +- index.ts # Main source file for Cloud Functions
|
+- .eslintrc.js # Optional ESLint file
|
+- package.json # npm details for code
|
+- tsconfig.dev.json # Uses .eslintrc.js
|
+- tsconfig.json
.eslintrc.js
module.exports = {
root: true,
env: {
es6: true,
node: true,
},
extends: [
"eslint:recommended",
"plugin:import/errors",
"plugin:import/warnings",
"plugin:import/typescript",
"google",
"plugin:@typescript-eslint/recommended",
],
parser: "@typescript-eslint/parser",
parserOptions: {
project: ["tsconfig.json", "tsconfig.dev.json"],
sourceType: "module",
},
ignorePatterns: [
"/lib/**/*", // Excludes built files.
],
plugins: [
"@typescript-eslint","import"
],
rules: {
"quotes": ["error", "double"],
"import/no-unresolved": 0,
"indent": ["error", 2],
},
};
package.json
{
"name": "functions",
"scripts": {
"lint": "eslint --ext .js,.ts .",
...
},
"engines": {...},
"main": "lib/index.js",
"dependencies": {...},
"devDependencies": {...},
"private": true
}
tsconfig.dev.json
{
"include": [
".eslintrc.js"
]
}
tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
...
},
"compileOnSave": true,
"include": [
"src"
]
}
In this state, the "deploy" script completes successfully with no errors during the function deployment process.