Using surge.sh to deploy a Vue project

All day I've been attempting to deploy my Vue project on Surge.sh. The project is built using the webpack-simple template.

Strangely, manual deployment from my CLI works fine. However, when I push it to GitHub and try deploying it from Travis CI, it fails. When deployed from Travis, the dist/ folder isn't included, causing the site to not function properly.

Below is my Travis CI configuration:

language: node_js
node_js:
  - "node"
  - "7"
cache:
  directories:
    - node_modules/
    - dist/
install:
  - npm install
after_success:
  - surge --project . --domain mydomain.surge.sh

I have also added two environment variables, namely SURGE_TOKEN & SURGE_LOGIN. I'm at a loss of what to do next. Any assistance would be greatly appreciated.

webpackvue.jsvuejs2travis-cisurge.sh

Answer №1

It seems that the dist folder goes missing after the Travis build process because the environment is cleaned up at each step.

To avoid this issue, you should include a deploy: section in your .travis.yml file and set the skip_cleanup: true option.

Fortunately, Travis CI offers direct support for Surge.sh deployment, eliminating the need to use the surge CLI tool in an after_success step. Refer to the provided link for detailed instructions on setting it up.

Update:

You might also need to add a script: step to build your website before deploying it. Without this, the command mentioned in this link may not be executed by any other means.

Consider adding something like this:

install:
  - npm install
script:
  - npm run build
deploy:
  provider: etc...

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

There has been a mistake: The module '.... ode_modules erser-webpack-plugindistindex.js' cannot be found. Please ensure that the package.json file contains a correct "main" entry

After setting up Vue.js and executing npm run serve, I encountered the following error: PS C:\Amit\Demo\VUEDemo\myvue> npm run serve > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="98f5e1eeedfdd8a8b6 ...

javascriptnode.jsvue.jsnpmwebpack

Is there a way to instruct npm to compile a module during installation using the dependencies of the parent project?

I am curious about how npm modules are built during installation. Let me give you an example: When I check the material-ui npm module sources on GitHub, I see the source files but no built files. However, when I look at my project's node_modules/mate ...

javascriptnode.jsnpmwebpackmaterial-ui

Displaying various pop-up notifications upon clicking a table element

I am completely new to VueJS and I'm currently working on populating a table with various columns, one of which contains a button that triggers the opening of a modal. There are three different types of modals that can be opened based on certain condi ...

vue.jsbootstrap-vue

Protecting Your Routes with Guards in Framework 7 Vue

Whenever I utilize the following code snippet: { path: '/chat/', async(routeTo, routeFrom, resolve, reject) { if (localStorage.getItem('token')) { resolve({ component: require('./assets/vu ...

vue.jsvuejs2html-framework-7

Is it possible to eliminate the arrows from an input type while restricting the change to a specific component?

Is there a way to remove the arrows from my input field while still applying it only to the text fields within this component? <v-text-field class="inputPrice" type="number" v-model="$data._value" @change="send ...

javascripttypescriptvue.jsvuetify.jstailwind-css

Converting a string into an array of JSON objects

I am currently attempting to send data to my NodeJS server using the HTTP protocol (vue-resource). The goal is to send an array of JSON objects structured like this : [{"name":"Charlotte","surname":"Chacha","birth":"2000-04-02"},{"name":"Michael","surname ...

javascriptnode.jsvue.jsexpress

Issue encountered when integrating vue2-google-maps into a project using vue.js and Laravel 5.6.12

I am currently utilizing Laravel 5.6.12 in combination with vue.js I am attempting to integrate Google Maps using the following GitHub link I am adhering to the instructions provided in the aforementioned link, as follows. Installation npm install vue2 ...

google-maps-api-3vue.jslaravel-5.6

Encountering a problem while running npm build (PostCSS plugin postcss-purgecss needs PostCSS 8) on vuejs3 with tailwind

I'm currently in the process of developing an application using Vue.js 3 and Tailwind CSS. While testing some configurations before diving into the project, I encountered a specific error message when running npm run build: ERROR Failed to compile wit ...

node.jsvue.jsnpmtailwind-csspostcss

Setting a proper prop path for nested data within a table component in Element UI using Vue JS

I'm currently facing an issue with form validation in a table layout using element-ui. Specifically, I am struggling to pass a valid prop to the el-form-item component. The structure of my data model is as follows: form: { invoices: [ { ...

vue.jsvuejs2frontendvue-componentelement-ui

Error: The options object provided for CSS Loader is not valid and does not match the API schema. Please make sure to provide the correct options when

Summary My Nuxt.js project was created using the command yarn create nuxt-app in SPA mode. However, I encountered an error after installing Storybook where running yarn dev resulted in failure to start the demo page. ERROR Failed to compile with 1 errors ...

javascriptvue.jswebpacknuxt.js

Connecting an image to the Laravel Public folder using Laravel and Vuejs

In the past, I utilized the following code when using blade: <img src="{{ asset('images/3379.svg') }}" alt="computer"> However, now that I have switched to Vue, this code no longer functions. Can anyone provide guidanc ...

laravelvue.js

Loading a Vue.js template dynamically post fetching data from Firebase storage

Currently, I am facing an issue with retrieving links for PDFs from my Firebase storage and binding them to specific lists. The problem arises because the template is loaded before the links are fetched, resulting in the href attribute of the list remainin ...

javascriptfirebasevue.jsfirebase-storage

Can you explain the significance of the "null" area in the source-map-explorer visualization of my React project, and why does it appear to be disproportionately large compared to other areas?

Currently, I've been immersed in a React project that consists of 8 components and makes use of styled-components, react-spring, and AWS-Amplify. Despite the simplicity of the project, the build size is unexpectedly over 3MB. After analyzing it with ...

reactjswebpackaws-amplify

What is the best way to retrieve component data within the mapState() function?

When the prop buttonType has a certain value, I need to access different store variables: ...mapState({ backgroundColor: state => this.buttonType === 'primary' ? state.primary_button.background_color : state.secondary_button.backgrou ...

vue.jsarrow-functions

Initialize the Vuex state upon app startup according to the route parameters

For my Vue app, I have numerous routes that contain a 'tenantId' parameter. Upon the initial load of the app, I need to extract the 'tenantId' value from the route, fetch data from an API, and set up the Vuex store accordingly. Since t ...

vue.jsvuexvue-router

Detecting a component within a slot using Vue

Within my tile component, there is a slot where users can input various html tags, including a specific component called <listitem />. Is there a way to detect if this special component is used within the slot? <div class="tile"> &l ...

vue.jscomponents

What could be causing html-webpack-inline-source-plugin to prevent the page from refreshing after editing CSS files?

Currently, I am utilizing a plugin that embeds all CSS within the final HTML file. This method prevents the application from refreshing in development mode. Whenever I make edits to the CSS, the build process completes normally, but the styles do not updat ...

javascriptcssreactjswebpack

Styler column - Bootstrap-vue - VueJS

The goal is to format the 'from' and 'to' columns in a way that displays their description rather than their code in the table. <b-table id="my-table" hover striped small outlined :items="items" :fields="fields" class="mt-0 mb-0"> ...

vue.jsbootstrap-vue

Creating a Product Configurator using Vue.js and HTML Canvas

My goal is to develop a shoe configurator and I'm seeking advice on how to begin. I'm wondering if it's feasible to utilize vue js for creating the shoe model (upper, tongue...) and integrating with an html canvas where I can dynamically loa ...

web-applicationshtml5-canvasvue.js

Using Vue.js to make an AJAX request to an API that returns a list in JSON format

I am attempting to utilize an AJAX call with the free API located at that returns a list in JSON format. My goal is to display the result on my HTML using Vue.js, but unfortunately, it doesn't seem to work as expected. This is my JavaScript code: va ...

javascriptjsonajaxvue.js