Tips on streamlining the deployment process for a basic Vue WebApp without the need for a server (e.g. setting up a straightforward build chain with Vue

I have developed a Vue app and I am exploring ways to automate its deployment process by implementing a CI/CD pipeline that includes linting, testing, building, and uploading the files to web servers (such as stage or production using sftp).

After researching task runners like grunt (which appears outdated) and gulp, and considering options like Jenkins for CI, I am leaning towards using npm scripts. This would allow me to easily chain tasks like linting, testing, and building.

{
  "scripts": {
    "build": "vue-cli-service build --modern",
    "lint": "vue-cli-service lint",
    "prettier": "prettier --write src/**/*.{ts,js,vue,css,less,scss,html,json,md} public/**/*.{ts,js,vue,css,less,scss,html,json,md} test/**/*.{js,vue,css,less,scss,html,json,md} build/*.js",
    "deploy": "# ...?",
    "pipeline": "yarn lint && yarn prettier && yarn test && yarn build && yarn deploy"
  },

However, I am still searching for the best approach to deploy the build to my web server. While grunt offers solutions like grunt-rsync and grunt-sftp-deploy, it may not be the most up-to-date option.

If anyone has recommendations or suggestions on an easier deployment method, please share!

Additional information: I am using Windows and prefer not to publish my source code on Github in this case.

Answer №1

If you're looking for an easy way to deploy a static site, consider using pages.github.com - simply push your build to a Github repository.

Another straightforward option is netlify - just install it with the command npm install netlify-cli -g. More information can be found in the official documentation

For those in need of a more comprehensive CI solution, explore services like GitHub, Bitbucket, GitLab, and others instead of searching for "vue deploy". One example is an easy introduction provided by CircleCI


Now, back to your question - are you using Linux/Mac or Windows? Deploying on Linux is simple with a command like scp from/local/dir to@remote/dir. If you're on Windows, you might want to consider node.js alternatives as suggested in this answer

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

Using JavaScript to only update the CSS background image when the source image changes

Is it feasible to dynamically update the CSS image referenced by a provided URL in "background-image: \"<some-url>\" using JavaScript, but only when the source image is modified on the server? The idea is to cache the image a ...

Leveraging Angular for REST API Calls with Ajax

app.controller('AjaxController', function ($scope,$http){ $http.get('mc/rest/candidate/pddninc/list',{ params: { callback:'JSON_CALLBACK' } }). success(function (data, status, headers, config){ if(ang ...

Is there a way to streamline routing in AngularJS similar to how .NET Data Annotation automates tasks?

Understanding the routing system in AngularJS is key, as shown below: .when('/96', { templateUrl: "96.html", animation: 'present' }) .when('/96/moharram', { template ...

New to Django - Seeking assistance with concealing sections of a dynamically generated table

I am working on a dynamic table where I need to show or hide certain parts based on the state of corresponding checkboxes. When a checkbox is unchecked, I want to hide the specific section of the table with the class "newtable" for that row only. Each row ...

Having issues with installing @angular/cli globally using npm on Windows 7, the process gets stuck and does not

Encountering an issue while attempting to install the Angular CLI from npm, as it gets stuck asking to loadAllDepsIntoIdealTree. Here are the steps taken: C:\Windows\system32\node -v v6.11.1 C:\Windows\system32\npm -v 3.1 ...

Initial 16 characters of the deciphered message are nonsensical

In a specific scenario, I encounter data encryption from the API followed by decryption in TypeScript. I have utilized CryptoJS for decryption in TypeScript. Below is the decryption code snippet: decrypt(source: string, iv: string): string { var key = envi ...

Function that observes with the pipe syntax

Is it possible to apply map, switchMap, or any other operator in conjunction with a function that outputs an observable? The objective here is to transform the result of the observable function and utilize that value during the subscription to another ob ...

Template for Vue.js Component Registration

Below is a simple Vue component example: const MyComponent = Vue.component('my-component', { data () { // data here... }, methods: { // methods here... }, template: '<p>Hello, world !!!</p>' }); I ...

Identifying Hashtags with Javascript

I am trying to identify hashtags (#example) in a string using javascript and convert them to <a href='#/tags/example'>example</a> Currently, I have this code: var text = '#hello This is an #example of some text'; text.r ...

"Discrepancy found in results between Node-Fetch POST and Firefox POST requests

I have encountered a challenge while trying to replicate a successful log-in process on a website using node-fetch after being able to do so with Firefox. The login process consists of three stages: Visiting /login which returns a sessionToken from the we ...

Avoid passing the observable to return values from the service layer to the component

I am currently attempting to pass the outcome of a service layer with regard to components. The service that connects with the API: public getPerfilNew$(): Observable<PerfilInvestidor> { return this.http.get<PerfilInvestidor>(`${e ...

The mobile menu functions correctly on Jfiddle but is not functioning on the local server

I was working on a responsive mobile menu and used a toggleClass function to open the menu. It's functioning correctly in Jfiddle and below, but every time I click the nav icon in the live preview within brackets, nothing happens. I even tried it in a ...

Change the WordPress Divi Builder nav bar to switch from transparent to white when scrolling or upon reaching a specific point on the page

Currently, I am in the process of revamping our company's WordPress website using the Divi Builder. For the past couple of days, I have been scouring the internet trying to find a solution that would allow the navigation bar to change CSS classes as t ...

Is it best practice to utilize factories for generating constructor functions in AngularJS design patterns?

As I was developing an AngularJS app, I started thinking about the use of factories in a different light. Instead of just returning plain objects, what if we used factories to create and return constructor functions like this: app.factory("Foo", function( ...

Different Ways to Access an Array in an EJS Template

After receiving a list of IDs from an API, I need to include them in a URL within an EJS template to retrieve the correct items. For example, the URL format is: Here are some example IDs: 526 876 929 The desired output inside the EJS template: <li&g ...

AngularJS combined with jVectorMap allows for the seamless rendering of small interactive

I am facing a similar issue to one discussed here, but with some minor differences. Initially, my map loaded without any problem on the site. However, after adding Angularjs to the site, I noticed a 'small' map issue. It seems like a simple code ...

Variables are losing their way in the vast expanse of self-submitting

I have a form that needs to be submitted on the same page (index.php) and I want to capture the entered information as a JavaScript variable. <?php $loginid = $_POST[username] . $_POST[password]; ?> Here is some basic code: <script> var pass ...

Having no choice but to resort to using the 'any' data type in a Typescript/Vue3 project

My function is composed to return an array of objects, while another function takes a string as input and does not return anything. The code below functions without any errors: import { ref } from "vue"; import { useRoute } from "vue-router ...

Load data from a JSON flat file and dynamically populate new <li> elements with it

I'm attempting to utilize data from a json flat file in order to: Create new list items Fill specific classes within the newly created list items The json data appears as follows: { "event": { "title": "Title of event", "preface": "Prefa ...

Having trouble getting the Bootstrap modal form to submit when using Knockout's submit binding?

Check out my jsFiddle example by clicking here. I am currently working on a form within a bootstrap modal. The problem I'm facing is that the knockout submit binding doesn't get executed unless the user clicks on the submit input. It seems like ...