Setup Questions

[MuTe33]

Hey guys,

first of all, great job and big probs on doing this. So much value and I'm recommending this to all my dev friends haha!

I have some questions regarding the setup of this project. Excuse my experience level on this but never worked with javascript/typescript before and I'm also not a backend dev. Unfortunately there is no video explaining on how to set this all up, but only a walkthrough of the already existing setup. (Don't get me wrong, this is not blaming at all! :) ) I've read multiple comments on how to set this up and I guess there are many other people like me asking themselves the same questions I'm going to ask in this Q&A.

I will first explain the steps I did and then ask where I'm still unsure. Maybe this will also help many other beginners to understand better and to resolve open questions. It will be a bit long but I think going through the steps will ensure that people of different experience levels can follow more easily.

So when I tried to setup up the same structure as you I did some research on how to setup such a firebase project. I did the following steps:

• Create new Firebase Project in the console
• Create new project in IDE and manually create src folder and backend subfolder
• Execute the following commands while in backend folder
  • npm install -g firebase-tools--> installs Firebase CLI
  • firebase login --> for authentication
  • firebase init --> initialize the firebase project
    • select cloud functions
    • select firebase project
    • choose JS or TS --> went for: TS
    • choose ESLint Yes/No --> went for: No
    • choose to install dependencies with npm now Yes/No --> went for: Yes

Hope so far all good. I was unsure about the ESLint but I think you created your own linter file.

Outcome of this in the project:
firebase.json, .firebaserc and .gitignore files were created

Question 1)
In firebase.json there is generated code inside such as:

{
  "functions": {
    "predeploy": "npm --prefix \"$RESOURCE_DIR\" run build"
  }
}

Looking at your firebase.json there is something whole different in it. Did you change it by yourself? What's the meaning of this file? How did you come up with does ports?

Also functions folder was created and has following folders/files:
- src folder with an index.ts file in it
- .gitignore, package.json, package-lock.json and tsconfig.json files

Question 2)
In package.json there is the node version of 12 defined. You have 10 there. Can I just change it and run npm install to update the project or how else can I update the node version? In general when I add some dependencies to this file I always run npm install in order to update the project. Hope this is fine.

You added to the project manually two more files: tslint.json and index.ts (>>>not<<< the index.ts file within the src folder!!!)

Question 3)
The tslint.json is getting for me an error as there are commented lines. So how can you not get any errors? In json files it is not possible to have comments. Did you autogenerated that file or from where does this come from?

Question 4)
In the index.ts (again: >>>not<<< the index.ts file within the src folder!!!) there is only one line of code:

exports[folderName] = require(file);

When I manually create this file, this code is causing an error in VS Code. It's not valid typescript code. In your video I've seen that whenever you click into the file the errors are appearing and when you click into another file they are gone. But for me there are always there. So, from where does this file come from and what's the purpose of it? And how do I resolve those errors?

This is it from my side. I will follow this project intensely! I hope those questions and step by step explanation will help all the people who are at a similar experience level or have similar questions.

Hope to hear from you or anyone from the community.

Many thanks and all the best!

[FilledStacks]

Hi,

Thanks for the detailed question. I appreciate it.

I did kind of gloss over the setup for the firebase project. I didn't do anything special in particular besides change engine to 10 like you mentioned. But let me answer the questions instead.

1. I didn't change anything myself. I initialised the firebase emulator and it put all those values in there.
2. I selected ESLint Y so it added that file in there for me. I didn't create an index.ts file myself. I'll see where that came from 😅
3. It was added when I selected ESLint Y
4. I just checked that file, you can completely remove it. I don't know where it came from. Everything else should still work fine without it.

I was going to cover the environment to develop in when we start the development in the backend. So i didn't think about making the tutorial around how it was initialised, and i do see the error in that thinking now. Maybe I'll do a quick overview before we start the development on the backend to make sure that everyone's environment is setup correctly.

Thanks again for the detailed question, I hope I answered it for you.

[MuTe33]

Hi again :)

thanks for the fast answer, I really appreciate!

I don't want to be too picky, but there is still some confusion and open questions- at least it is less than before 😄

to 1) I did initialize the firebase emulator with firebase emulators:start and I could see the UI emulator at http://localhost:4000 but still this hasn't changed my firebase.json file at all.
EDIT: I found it the answer to this question: when doing firebase inityou can also select emulators and then it will create the firebase.json file accordingly.

to 2) I now selected ESLint with Yes and it created me two files .eslintrc.js and tsconfig.dev.json. Before that I did not have a tsconfig as a dev file - this is somehow strange. It also added me some dependencies into the package.json such as:

 "eslint": "^7.6.0",
 "eslint-config-google": "^0.14.0",
 "eslint-plugin-import": "^2.22.0",

Another strange thing is that the .eslintrc.js is a js file and it apparently is an optional file containing rules for JavaScript linting, but we are using Typescript. 😅

When looking into your tsconfig file there are no such dependencies. Your lint dependency is "tslint": "^5.12.0". When I add this to my package.json I still don't get the tslint.json.

I'm not sure whether I'm doing something wrong here. I don't want to be picky, but this project is going to be a hugh one and I do not want to encounter any problems along the way just because I made some mistakes while setting things up and do not know how to resolve them properly.

I hope this is understandable, have a good day/night! 😁

All the best.