Steps for deploying updates from a Laravel + Inertia + Vue3 application to a production server

I have been working on a project for a client, making changes to Vue and SCSS files. I need to deploy these changes to the live server, which is hosted on Digital Ocean with server-side rendering enabled.

    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix && mix --mix-config=webpack.ssr.mix.js",
        "watch": "mix watch",
        "watch-server": "mix watch --mix-config=webpack.ssr.mix.js",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "mix --production && mix --production --mix-config=webpack.ssr.mix.js",
        "production": "mix --production",
        "server": "nodemon public/js/ssr.js"
    },
    "devDependencies": {
        "@popperjs/core": "^2.10.2",
        "@vue/babel-plugin-jsx": "^1.1.1",
        "axios": "^0.21",
        "bootstrap": "^5.1.3",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "nodemon": "^2.0.15",
        "postcss": "^8.1.14",
        "resolve-url-loader": "^5.0.0",
        "sass": "^1.32.11",
        "sass-loader": "^11.0.1",
        "vue-loader": "^17.0.0"
    },
    "dependencies": {
        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
        "@duannx/vue-client-only": "^1.0.3",
        "@inertiajs/inertia": "^0.11.0",
        "@inertiajs/inertia-vue3": "^0.6.0",
        "@inertiajs/progress": "^0.2.7",
        "@inertiajs/server": "^0.1.0",
        "@stripe/stripe-js": "^1.23.0",
        "@vue/compiler-sfc": "^3.2.31",
        "@vue/server-renderer": "^3.2.31",
        "@vuepic/vue-datepicker": "^3.1.0",
        "algoliasearch": "^4.13.1",
        "inertia-title": "^1.0.2",
        "jquery": "^3.6.0",
        "moment": "^2.29.1",
        "nprogress": "^0.2.0",
        "slick-carousel": "^1.8.1",
        "sprintf-js": "^1.1.2",
        "vue": "^3.2.31",
        "vue-instantsearch": "^4.3.3",
        "vue-slick-carousel": "^1.0.6",
        "vue-stripe-js": "^1.0.0",
        "vue-timer-hook": "^1.0.0",
        "vue-toastification": "^2.0.0-rc.5",
        "vue3-autocounter": "^1.0.6",
        "vue3-datepicker": "^0.3.2",
        "vue3-lazyload": "^0.2.5-beta",
        "vue3-select2-component": "^0.1.7",
        "vuedraggable": "^4.1.0",
        "webpack-node-externals": "^3.0.0"
    }
}
laravelvue.jsinertiajs

Answer №1

I recently encountered a comparable scenario where I needed to update files on the live server. My solution involved replacing the old files with the new ones, as well as setting up node.js and npm on the live server if they weren't already installed. After completing these steps, I executed 'npm run dev' to ensure that any changes in JavaScript files, particularly those related to Vue, were properly registered. This approach has proven effective for me, and hopefully, it will be beneficial for you as well.

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

What steps do I need to take to integrate the turn.js JavaScript library with a Vue.js and Laravel project?

I am a Vuejs beginner currently working on a project that involves both Vuejs (front end) and Laravel (Backend). I have been trying to integrate the JQuery library turn.js into my project, but I keep encountering errors. While I have managed to run jQuery ...

jquerylaravelvue.jsflipturnjs

Difficulty encountered in constructing a menu through the process of iteration

As a newcomer to Vue and Vuetify, I am trying to create a submenu using v-menu. The construction involves iteration, where each sub menu needs to be assigned a method. However, my current approach is resulting in an error message: [Vue warn]: Error in v ...

vue.jsvuetify.js

Unable to update a property with a new value in Vue.js when using the keyup.enter event on an input element bound to that property

I am facing an issue with inputs that have the @keyup.enter event assigned to a method that is supposed to reset the value of variables bound to these inputs to null. Here is an example of my code: methods:{ clear: function () { this.somethin ...

javascriptvue.js

The persistent issue of window.history.pushstate repeatedly pushing the identical value

I need some assistance with my Vue application. I am trying to update the URL when a user clicks on an element: const updateURL = (id: string) => { window.history.pushState({}, '', `email/${id}`); }; The issue I'm facing is th ...

javascriptvue.jsvuejs3vue-router

Error: EPERM: unable to perform operation, remove 'C:wamp64wwwdev ode_modules.staging'

Can someone assist me with this npm error? NPM version: 5.5.1, Node version: 8.9.1, OS: Windows 10 64-bit S C:\wamp64\www\dev> npm install bulma npm ERR! path C:\wamp64\www\dev\node_modules\.staging npm ERR! ...

node.jslaravelnpmstagingbulma

Utilizing vuetify a-la-carte with Laravel-mix: A step-by-step guide

Looking to implement Vuetify's a-la-carte method with laravel-mix. I've gone through the documentation and found this useful post. Here's my complete webpack.mix.js configuration: const mix = require('laravel-mix'); const Vuetif ...

vue.jswebpackvuetify.jslaravel-mix

Clicking on the Submit button of the post form simply refreshes the page

Every time I try to submit values from an HTML form, the page reloads without any changes. I've double-checked the routes and controller, but everything seems correct. Solution <div class="panel-body"> @if (session('status')) ...

phphtmllaravel

VueJs encountered a fatal error when trying to promote young objects in the MarkCompactCollector, resulting in a failed allocation due to the JavaScript heap running

When I try to run the build command (npm run build) for my VueJs project, I encounter an error. package.json { "name": "acme-web", "version": "0.1.0", "private": true, "scripts": { ...

vue.jsnpmwebpacknpm-build

Insert icons in the action columns and in every single row

https://i.stack.imgur.com/4EH91.png In the realm of vue.js, there exists a project tailored for a thriving car sales company. The intricacies lie within a table fuelled with essential information concerning each vehicle, evident in the image provided. Ever ...

vue.jsvuetify.js

Utilizing Vue Cli's Webpack Proxy feature

While working on a project using the vue-cli and the Webpack template, I am facing some difficulties with setting up a custom host. Currently, Webpack is listening to localhost:8080, but I need it to work with a custom domain like . Has anyone found a solu ...

proxynpmwebpackvue.jswebpack-dev-server

Is it possible to modify content in a Laravel post using formData?

Working on a social network, I encountered an issue when trying to enable post editing. The error message displayed is: message: "This action is unauthorized." Despite following the flow of sending data through Axios calls and defined routes to the contr ...

phplaravelvue.jsaxios

Unexpected shift in margin appearance: Vuetify acting strangely?

I'm currently working on a project in a new location and I've noticed some differences in the margins compared to my previous work environment. Despite having the same package.json, the only change seemed to be due to a new npm install. For insta ...

vue.jsvuetify.js

Why do referees attempt to access fields directly instead of using getters and setters?

I am facing an issue with my TypeScript class implementation: class FooClass { private _Id:number=0 ; private _PrCode: number =0; public get Id(): number { return this._Id; } public set Id(id: number) { this._Idprod ...

typescriptvue.jsvuejs3

Enhancing Headless UI tabs with Tailwind transitions: A step-by-step guide

Can transitions be used with headlessui tabs? I am currently utilizing @headlessui/vue <template> <TabGroup> <TabList> <Tab>Tab 1</Tab> <Tab>Tab 2</Tab> <Tab>Tab 3</Tab> < ...

vue.jsvuejs3tailwind-cssheadless-ui

What steps should be followed to incorporate a horizontal scrollbar within the table's header?

I'm currently using Vue and Vuetify to create a unique layout that looks like this: https://i.stack.imgur.com/QBs3J.png The layout consists of a card with three rows: The first row displays the number of items and includes a search bar. The second ...

cssvue.jsvuetify.js

Exploring the functions of the uiv module within nuxt.js

After successfully installing the module, I inserted the following code into the plugin folder: // uiv.js import 'bootstrap/dist/css/bootstrap.min.css' import Vue from 'vue' import * as uiv from 'uiv' Vue.use(uiv) I am ...

twitter-bootstrapvue.jspluginsvuejs2nuxt.js

Navigating TS errors when dealing with child components in Vue and Typescript

Recently, I encountered an issue where I created a custom class-based Vue component and wanted to access its methods and computed properties from a parent component. I found an example in the Vue Docs that seemed to address my problem (https://v2.vuejs.org ...

typescriptvue.js

Troubleshooting Vue and Typescript: Understanding why my computed property is not refreshing the view

I'm struggling to understand why my computed property isn't updating the view as expected. The computed property is meant to calculate the total price of my items by combining their individual prices, but it's only showing me the initial pri ...

typescriptvue.jsnuxt.js

Unspecified property in Vue.JS data object

Whenever I try to display my modal, an error pops up indicating that the property is not defined, even though I have clearly declared it in the Data(). It seems like there is a crucial aspect missing from my understanding of how everything functions... T ...

javascriptvue.jsvuejs2

Looping through multiple lines of output in VueJS

Looking for a solution to optimize my for loop <div class="w3-panel w3-blue w3-card-4" v-for="peer in peers" v-bind:key="peer" > {{ peer.hop }} {{ peer.time }} </div> ...

vue.js