I have decided to integrate Laravel with Vite for building CSS and JS. However, when I attempted to run `npm run dev`, it appeared to execute but was accompanied by an error in the background that

Hi there, I'm new to Laravel and I've created a small app that primarily uses CSS and JS scripts. Everything was working fine in my development environment, so I decided to push it to a production server. However, after installation, my code doesn't seem to recognize the CSS or JS.

When I run npm run build, I can see that app-5134ec8e.js and app-a020c83f.css are created in the public/build/assets folders, indicating that the build process is running successfully.

Upon running npm run dev, I receive the following output:

  VITE v4.1.4  ready in 654 ms
  ➜  Local:   http://127.0.0.1:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help
  LARAVEL v9.52.4  plugin v0.7.4
  ➜  APP_URL: http://phplaravel-960268-3351661.cloudwaysapps.com/

Despite this, there are no visible CSS or JS changes on the page.

If I try to stop the npm run dev command, I encounter the following error:

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ dev: `vite`
npm ERR! Exit status 1
npm ERR! ...

After inspecting the log file, I found the following message:

 ...

I've spent hours trying to troubleshoot this issue, but I'm still unsure of what it's trying to convey. Any help would be greatly appreciated.

javascriptcsslaravelnpmvite

Answer №1

Since this server is not for development purposes, there is no need to execute npm run dev. This server is meant for real-time development, where changes are instantly reflected on the page. The links on the page point to the Vite server. However, on the production server, we cannot link to port 127.0.0.1:5173, resulting in the inability to locate the files.

For production, it is necessary to run npm run build. This command will generate physical files in your project under the /public/build/assets/ directory.

Additionally, you must configure the APP_ENV to production on the server so that Vite utilizes the physical files instead of the server.

In summary:

  • Set APP_ENV=production in the .env file,
  • Execute php artisan config:clear,
  • Run npm run build.

Your links should appear as follows:

<link rel="preload" as="style" href="http://yourwebsite.com/build/assets/app-896e15f9.css">
<link rel="modulepreload" href="http://yourwebsite.com/build/assets/app-c96e25ca.js">
<link rel="stylesheet" href="yourwebsite.com/build/assets/app-896e15f9.css">
<script type="module" src="http://yourwebsite.com/build/assets/app-c96e25ca.js"></script>

Answer №2

If vite continues running despite encountering an error, there is likely no issue with it as I also encounter errors sometimes. If the page does not change, it could be because you have not executed the following command.

php artisan serve

After running this command, access your app using the port number provided (usually 8000 if it is not being used by another service). Your JavaScript and CSS should now work correctly.

If this solution proves helpful, I would appreciate it if you could vote and verify my answer. Thank you :) <3

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

The HTML form submission button fails to submit the form and instead just refreshes the page

I'm struggling to get the save button working on my Chrome Extension settings page. The .click() event doesn't seem to be activating at all. I've included my code below. Should I use the commented out button instead (see below)? HTML <! ...

javascriptjqueryhtmlforms

Mapping a bar chart on a global scale

Are there any methods available to create bar charts on a world map? The world map could be depicted in a 3D view resembling a Globe or in a 2D format. It should also have the capability to zoom in at street level. Does anyone have suggestions or examples ...

javascriptjquerythree.jswebglcesiumjs

Having trouble getting the form input max-width to work properly within a flex-box

My webpage features a header containing various icons, a title, and a search box that triggers an animation when the search button is clicked. While this setup works seamlessly on larger screens, I encounter issues on smaller screens. My goal is for the se ...

htmlcssflexbox

Irregular word spacing observed in HTML code

The alignment of text on my website is causing some spacing issues that I can't quite seem to resolve: It's an asp.net page, and I've attempted a couple of potential solutions: CSS .optionClosed { font-size: large; ...

htmlcss

Unable to generate a NestJS project

When attempting to create a new NestJS project on my Windows 10 using the nest new project-name command, an error message pops up after some time: ? Which package manager would you like to use? yarn Installation in progress... Failed to execute command: ...

npmnestjsyarnpkg

Unable to retrieve the most recent global variable value within the confirmation box

<script type="text/javascript"> var customDiv ="hello"; $(function () { var $form = $("#authNotificationForm"); var startItems = $form.serializeArray(); startItems = convertSerializedArrayToHash(startItems); $("#authNoti ...

javascriptjquerydialogmodal-dialogconfirmation

The content in tinymce cannot be edited or removed

Is there a method to prevent certain content within the tinyMCE Editor from being edited or removed? While I know that adding a class "mceNonEditable" can make a div non-editable, it can still be deleted. Is there a way to make it unremovable as well? ...

javascriptjquerytinymce

Ways to turn off JavaScript when reaching a certain breakpoint, similar to a media query

I am facing an issue with my <header> and <nav> blocks which are impacted by JavaScript. Is there a way to create a JavaScript solution similar to a media query that would deactivate this JavaScript code if the window width is less than or equa ...

javascriptjqueryhtmlcss

Deactivate event handling for viewport widths below a specified threshold

Currently, I am attempting to deactivate a script when the width of the window falls below 700px. Despite reviewing suggestions from various sources, I have not been successful so far. window.onresize = function () { if(window.innerWidth < 700) { ...

javascriptjquerycssevent-handling

Rendering Highcharts React Pie Chart Multiple Times

Here is the code snippet: import React, { useEffect, useRef, useState } from "react"; import * as Highcharts from "highcharts"; import HighchartsReact from "highcharts-react-official"; export const PieChart = (props: any) =&g ...

javascriptreactjshighchartsnext.js

Retrieve data from a ng-repeat variable within a controller

Below is the current code snippet: HTML <center><li ng-repeat = "x in items | orderBy: 'priority'"> <!-- color code priorities --> <span ng-style="cmplt" ng-class="{ red: x.type == &apo ...

javascriptangularjs

Handling events with ReactJS can be made even more powerful by passing parameters to

Just dipping my toes into the world of ReactJs and I've put together a component to display a list of buses. My goal is to enable edit and delete functionality for each bus, but I'm struggling to pass the corresponding busId to my edit/delete met ...

javascriptreactjsreactjs-native

Updating Mysql data via a button on the homepage using the passed ID in the URL - a step-by-step guide

I have set up a Bootstrap modal popup for editing items on the home page. My goal now is to update the details of the selected item using PHP. In this case, I am passing the item id through the URL to select the item. After clicking the edit button, a po ...

phphtmljquerycssajax

Enhancing the functionality of a bootstrap button with the addition of an

My goal is to have a button that opens a URL in a new tab. I've managed to achieve this using window.location.href, but it doesn't open the URL in a new tab. The code I'm working with is written in jQuery and Javascript, and it's part ...

javascriptjqueryhtmltwitter-bootstrap

Configuring the local server address as http://localhost:8081/ in a React Native application for Android

As I venture into developing an Android app using React Native, being a newcomer to the platform raises some questions. Is it possible to load the index.js file from an external source like https://domain_name.com/appname/index, rather than just setting ...

androidreact-nativenpmmobilelocalhost

The proper method for waiting for a link to be clicked using Selenium

On my web page, I have the following HTML: <a id="show_more" class="friends_more" onclick="Friends.showMore(-1)" style="display: block;"> <span class="_label">Show More Friends</ ...

javascriptpythonpython-3.xselenium

Issue with displaying nested React Elements from Component

I am currently facing an issue with my Collection component, which is utilizing a sub-component called RenderCollectionPieces to display UI elements. Strangely, I am able to see the data for image.name in the console but for some reason, the UI elements ar ...

javascriptreactjsmaterial-ui

Steps for Updating the Git Repository in package.json

After initially setting up my project on GitLab, I decided to migrate to GitHub by importing the repository. While all the history (commits) was successfully imported, I noticed that new commits are still showing up in GitLab and not updating on GitHub. Ho ...

gitgithubnpmgitlabpackage.json

Retrieve every HTML element that is currently visible on the screen as a result

I have a dynamic HTML table that updates frequently, with the potential for over 1000 rows. Instead of replacing the entire table each time it updates, I am exploring options to only update the visible rows. My initial approach involved iterating through ...

javascripthtmldom

Save the array as a variable in your JavaScript code so that you can easily access it

I am currently working on generating a list only when a specific page is visited using JS/jQuery. I then need to be able to access this list when navigating to other pages and retrieve the variables within it. How can I effectively store this list? Initia ...

javascriptjquery