Automating the deployment of a vue.js app using GitLab CI/CD pipeline to deploy to

Currently experiencing an issue with the pipelines involving my YAML file that automates deployment of a Vue app to Firebase. Despite including scripts in the file and setting up the Environment variable FIREBASE_TOKEN on GitLab, pushing the code to a GitLab Merge/Pull Request (PR/MR) does not trigger any pipeline.

Here is a snippet of my .gitlab-ci.yaml file :

image: rambabusaravanan/firebase

stages:
  - deploy

cache:
  paths:
    - node_modules/
  key: "$CI_BUILD_REPO"

deploy-prod:
  stage: deploy
  only:
    - master
  script:
    - yarn
    - yarn run build
    - firebase use HFB-Frontend-mock --token $FIREBASE_TOKEN
    - firebase deploy --only hosting -m "Pipe $CI_PIPELINE_ID Build $CI_BUILD_ID" --token $FIREBASE_TOKEN

I was following this tutorial for CI/CD GitLab: tutorial for CI/CD Gitlab

Unfortunately, even after following the tutorial, the PR/MR displays without triggering the pipeline:

https://i.sstatic.net/BBbGU.png

Answer №1

It appears that your CI configuration file has the incorrect file extension.

The correct extension should be .gitlab-ci.yml instead of .gitlab-ci.yaml (using .yml rather than .yaml)

Additionally, please note that the pipeline will only be triggered after a merge on the master branch. If you wish to have the pipeline run when a Merge Request is submitted, you must include the following:

  only:
  - merge_requests

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

Instructions for utilizing lodash or JavaScript to apply a filter to an object

Received this object from the Server: var data = { test1: { documents: [] }, test2: { documents: [{ vId: 'sdfas23', TypeId: '81', isDeleted: false }], answer: true }, test3: { documents: ...

What should you choose between vuex "store" and "data: store" in the Vue() constructor?

Vue documentation recommends using the "data" option in the constructor to maintain global or shared data: Link This approach seems logical and practical. Contrastingly, Vuex documentation initializes the "store" object without specifying a property name ...

javascript guide to dynamically update the glyphicon based on value changes

I am attempting to implement an optimal level feature where a glyphicon arrow-up will be displayed if a value falls within the optimum range, and it will switch to a glyphicon arrow-down if the value is lower. <div class="card-body" ng-repeat="item i ...

Maintaining awareness of which accordion drawer is currently open within a React application

Just getting started with coding, I recently created a collapsible accordion in a NextJs app using the react-collapse package. Everything seems to be working fine, but I'm running into an issue with keeping track of which 'drawer' is current ...

Issue with specific route causing server to throw 500 error

Recently, I have been working on a small school project that involves creating our own API and connecting it to an Angular front end. While following some tutorials, I encountered an issue where my application started throwing internal server error 500 af ...

What are some tips for creating an improved React list container component?

I have a small application that fetches movie data. The component hierarchy is not very complex. The state is stored in App.js and then passed down to the Movies.js component, which simply displays a list of movies in a ul element. Data passing from App.j ...

Vuetify Event Calendar

Currently, I am using the Vue calendar with Vuetify version 2.1.x. I am trying to retrieve the time from a specific slot when it is clicked like this: @click:time="test" <v-calendar ref="calendar" :locale="$i18n.locale" v-model="schedulerObj.calV ...

Learn how to manipulate Lit-Element TypeScript property decorators by extracting values from index.html custom elements

I've been having some trouble trying to override a predefined property in lit-element. Using Typescript, I set the value of the property using a decorator in the custom element, but when I attempt to override it by setting a different attribute in the ...

Updating charts in React using Chart.js with the click of a button

I am currently learning React and Chart JS, but I have encountered an issue. I am unable to change the data by clicking on a button. Initially, the graph displays: var Datas = [65, 59, 80, 81, 56, 55, 69]; However, I want to update this graph by simply p ...

Removing the arrow icon preceding an image in a new line when dealing with dynamic data

My Angular project renders dynamic content that includes the following HTML structure: <div class="complted" *ngFor="let step of letStep1to7; let i = index; let first = first"> <table> <td class="steps" ...

Response from the controller upon choosing a value from the selection dropdown

Scenario: In this scenario, there are two tables in consideration: Firm table : ID (string), Firm(string) Firms table: FirmID(string FK), Name(string) The goal is to select a value from the Firm table, pass it to the controller as Firm, and then execut ...

Where can Vue.js be found?

After dedicating an hour to watching instructional YouTube videos on Vue.js, I am still struggling to grasp the language! In the past, I have worked with Node.js, Jquery, and Mongodb to develop websites... I believe that web applications require multiple ...

Eliminating redundant values from a JSON object that is nested within another

Currently, I am working on rendering a list of Labels from a local JSON file. However, I am facing the issue of duplicates and I want each label to appear only once. I attempted to use Array.filter() and other methods to achieve this line: "Categories": ob ...

Conflicting node module versions arise during the installation of modules for electron

I'm currently developing an Electron application that interfaces with a serial port to read data. While I have experience with C++, I am relatively new to web technologies, although I do have some knowledge of JavaScript. After pulling the quick-star ...

What is the most effective method for determining the distance between two UK Postcodes?

Can you suggest a reliable method for calculating the distance between two UK postcodes in order to determine if they are within range? I do not intend to display a map, but instead provide a list of results for valid locations. For example, showing loca ...

converting a JSON array into an object

I seem to be facing a challenge: I have a JSON list with rows of data and a JSON object. My goal is to iterate through the list and assign the rows to different objects within the JSON structure. The first and last elements in the list are empty, followe ...

Transferring Information Across Javascript Documents

I am facing a dilemma with using JSON data generated by one script in another script. I am unsure where to begin and have considered saving the JSON string to a text file for the second script to use, but this feels like a workaround rather than a proper s ...

Changes in menu layout in response to window resizing

The menu needs to be centered on the website and adjust to the browser window resizing. Currently, it's positioned in the center and the animation is working fine. However, when I attempt to make the menu responsive so that it stays centered when resi ...

How can we enhance our proxyURL in Kendo UI with request parameters?

As outlined in the Kendo UI API documentation, when using pdf.proxyURL with kendo.ui.Grid, a request will be sent containing the following parameters: contentType: Specifies the MIME type of the file base64: Contains the base-64 encoded file content fil ...

What could be causing the issue of $.ajax being undefined while utilizing jQuery in Node.js?

I'm currently testing a module on Node.js that is meant for client-side use. In order to make $.ajax work, I need some guidance. To begin with, I have installed jQuery on the project using: $ npm install jQuery Despite this, when I try to access $. ...