When using firebase serve, typescript code is not being compiled prior to initiating the server

My typescript firebase function project is simple yet the code works fine. However, there seems to be an issue in the project configuration that causes firebase serve NOT to recompile the code before starting the server. On the contrary, firebase deploy works perfectly.

The project directory structure is as follows:

firebase
-.firebaserc
-firebase.json
-functions
--package.json
--tsconfig.json
--src
---...all the code goes here
--built
---...compiled code goes here

This is the content of firebase.json:

{
  "functions": [
    {
      "source": "functions",
      "codebase": "default",
      "ignore": [
        "node_modules",
        ".git",
        "firebase-debug.log",
        "firebase-debug.*.log"
      ],
      "predeploy": "npm --prefix functions run build" 
    }
  ]
}

And this is the content of package.json:

{
  "name": "functions",
  "scripts": {
    "build": "tsc",
    ...
  },
  ...
}

If I navigate inside the functions folder and execute npm run serve, everything works as expected. But when running firebase serve, it only serves the webserver with the current compiled code without reflecting any modifications. If the code isn't compiled yet, it fails to start. What steps can I take to resolve this issue?

Answer №1

Everything is functioning as anticipated. firebase serve does not execute any type of compilation or pre-processing on your code. It simply utilizes what is already present (potentially your previously compiled JavaScript).

The reason why npm run serve behaves as expected is because your serve script contains a specific instruction to compile your TypeScript:

"serve": "npm run clean-build && npm run build && firebase emulators:start --only functions",

The npm run build section of the script handles that compilation process (using tsc) before initiating the emulator.

If you desire a single command to execute your compilation step prior to running firebase serve, you could consider creating a new script for that purpose. For instance:

"firebase-serve": "npm run clean-build && npm run build && firebase serve",

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Struggling to locate package despite successful installation

When attempting to execute expo optimize, an error message prompts the need for sharp-cli. Following the guidance, sharp-cli is installed as directed. To my dismay, the same error persists even after completing the installation step. $ npm install -g &l ...

Initiating the installation of JavaScript packages using grunt

Currently, I am working on a javascript project using grunt, and my package.json file is structured as shown below: { ... name, author, etc here ... "dependencies": { "grunt-html":"0.2.1" } } Whenever I need to add new dependencies, I r ...

Use npm to streamline the process of building, minifying, and prefixing CSS all at once

I currently have a build script that is responsible for building CSS in the following manner: "prebuild:css": "node-sass --source-map true sass/styles.scss /styles.prebuild.css", "prefix:css": "postcss --use autoprefixer -b 'last 2 versions' < ...

Problem with rendering Ionic v2 HTML in Angular 2

Issue at Hand: Currently, I am developing a hybrid app using Ionic v2 and everything seems to be functioning correctly. When I use ionic serve, the app works as expected in the browser with no issues. However, when I try running the app on an Android devi ...

Deleting items from a JavaScript object array in Angular using TypeScript can be achieved by using various methods and

Here is the structure of my object array: 0: {Name: "Albert", Id: 32} 1: {Name: "George", Id: 34} 2: {Name: "Jane", Id: 35} Although the request is successful, the array remains unchanged. However, upon refreshing the app, the item (student) is deleted. ...

npm encountered an error because it could not find a version that matches @typescript-eslint/[email protected]

Having trouble installing the eslint parser, encountering this error. Despite adding "@typescript-eslint/parser": "^5.4.0" in package.json, The package fails to build. Tried deleting package-lock.json with no success. Should I delete ...

Top method in Angular 6 for verifying if a scrollable section has been scrolled to the very bottom

I am searching for a reliable solution in Angular 6 to determine whether a scrollable host component has reached its maximum scroll bottom. Despite my efforts, I have been unsuccessful in finding a functioning example of a function that can detect if a cu ...

When selecting an old list, only the most recently created ID is displayed, rather than the ID of the specific list being

I've set up a dashboard where I can create lists and have them displayed on the screen, but there seems to be an issue when trying to open any list as only the last created one opens. Can anyone point out what mistake I might be making? The technologi ...

Set up npm and node on Homestead

Just starting out with the Laravel framework, I tried to add a package using npm in my Homestead project. However, when I ran sudo npm install, I encountered some issues that took me quite a while to troubleshoot. In the end, I accidentally ended up dele ...

Eliminate the need to input the complete URL every time when making server calls

Currently, my springbok application has a React-Typescript frontend that is functioning well. I am using the request-promise library to make requests like this: get('http://localhost:8080/api/items/allItems', {json: true}). However, I would like ...

Can a map key value be converted into a param object?

I have a map containing key-value pairs as shown below: for (let controller of this.attributiFormArray.controls) { attributiAttivitaMap.set(controller.get('id').value, { value: controller.get('valoreDefault').value, mandatory ...

Struggling to set up a Jest testing module for a NestJs service. Encountering an issue where Nest is unable to resolve dependencies of the UsersService, specifically the Config

Greetings, fellow developers! I am excited to ask my first set of questions on stackoverflow :) Currently, I am working on a test/learning application to enhance my skills in NestJS and Vue. During the implementation of server-side unit tests using Jest, ...

What is the best practice for updating multiple fields within an ImmutableJS Record?

Looking for advice on updating multiple fields in an ImmutableJS Record efficiently. I attempted to use withMutations, but encountered an issue where the copy I created was empty and could not be mutated: const UserRecord = Record({ firstName: null, ...

Execute an NPM script within each individual package contained in an NX project's library

My current project involves using NX to manage a React design system mono-repo. To create components, I am utilizing an NX Library and exploring the idea of implementing a Node package that runs PostCSS to optimize the CSS for production. The PostCSS Node ...

NPM/node-gyp issue is causing trouble

After multiple attempts to install alsa for npm, I encountered a series of issues (as referenced below). Despite having all dependencies installed and running the latest versions of node.js, NPM, and node-gyp on two fully updated raspbian wheezy systems, t ...

When using the Angular Material table with selection enabled, the master toggle functionality should always deselect the

I made modifications to the original Angular Material Table example - Stackblitz. In my version, when some rows are selected and the master toggle is clicked, all selected rows should be deselected (similar to Gmail behavior). The functionality works, but ...

React Native: Error occurred while trying to install on virtual or physical device

For my final year project, I chose to use React Native for coding. However, I am facing an issue when trying to build and install it on virtual/physical devices, even though everything was working fine a month ago. Can someone help me figure out what' ...

typescript push in react native is a crucial step to enhance performance and optimize

I've been diving into TypeScript within the realm of React Native. Oddly, when I translated a certain snippet to vanilla JavaScript, the application worked flawlessly. However, upon converting it back to TypeScript, an error message popped up stating ...

Issue with the PrimeVue Toast Component: Unable to find the file 'ToastMessage' in the directory */toast

Embarking on a new project with vuejs, I decided to incorporate primevue components. However, my VueJS expertise is still in its early stages. The application utilizes a webpack-based build with vue-loader set up, facilitating the installation of primevue. ...

Issues inhibited the bundling process: when handling documents using ecmascript (for the web.browser target):

When attempting to compile a bundle directory for a Meteor app using the command meteor build --directory ., I encountered errors such as the following: Errors prevented bundling:<br> While processing files with ecmascript (for target web.browser): [ ...