Sorry noob to Lavarel, But I have created a small app that uses mainly CSS and JS script. I had it all working fine in my developed environment. so I am now pushing it to a production server. everything seemed to install fine except my code is not seeing CSS or JS
When I run npm run build app-5134ec8e.js and app-a020c83f.css get created in the public/build/assests folders so the build is running
and when I run npm run dev I get this come up
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/
As I would expect. but there seems to be no CSS or JS changes to the page when I look at it
if I stop the npm run dev then this error comes up
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ dev: `vite`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/master/.npm/_logs/2023-03-12T05_45_34_164Z-debug.log
An if I open the log the meassge is this
0 info it worked if it ends with ok
1 verbose cli [ '/usr/bin/node', '/usr/bin/npm', 'run', 'dev' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'predev', 'dev', 'postdev' ]
5 info lifecycle @~predev: @
6 info lifecycle @~dev: @
7 verbose lifecycle @~dev: unsafe-perm in lifecycle true
8 verbose lifecycle @~dev: PATH: /usr/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/home/960268.cloudwaysapps.com/ubepsvdjnz/public_html/node_
modules/.bin:/usr/local/bin:/usr/bin:/bin:/usr/local/games:/usr/games
9 verbose lifecycle @~dev: CWD: /home/960268.cloudwaysapps.com/ubepsvdjnz/public_html
10 silly lifecycle @~dev: Args: [ '-c', 'vite' ]
11 silly lifecycle @~dev: Returned: code: 1 signal: null
12 info lifecycle @~dev: Failed to exec dev script
13 verbose stack Error: @ dev: `vite`
13 verbose stack Exit status 1
13 verbose stack at EventEmitter.<anonymous> (/usr/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
13 verbose stack at EventEmitter.emit (events.js:400:28)
13 verbose stack at ChildProcess.<anonymous> (/usr/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack at ChildProcess.emit (events.js:400:28)
13 verbose stack at maybeClose (internal/child_process.js:1088:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:296:5)
14 verbose pkgid @
15 verbose cwd /home/960268.cloudwaysapps.com/ubepsvdjnz/public_html/public/build/assets
16 verbose Linux 6.0.10-x86_64-linode158
17 verbose argv "/usr/bin/node" "/usr/bin/npm" "run" "dev"
18 verbose node v14.20.1
19 verbose npm v6.14.17
20 error code ELIFECYCLE
21 error errno 1
22 error @ dev: `vite`
22 error Exit status 1
23 error Failed at the @ dev script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]
I spent 5 hours on this still don’t know what it’s trying to tell me,
2
Answers
So since this is not a development server we don't need to run
npm run devas this is a server that is used for real-time development eg. 'it is the thing when making a change and the page updates'. so the links on the page are to the Vite server. but on the production server, we can't link to port 127.0.0.1:5173 so we can't find the files.for production you need to run
npm run buildthis will create physical files within your project in /public/build/assets/ directorybut you also have to set the
APP_ENVtoproductionon the server also so that Vite knows to use the physical files, not the server.in short :
php artisan config:clearnpm run buildyou should the see your links look like this
If vite is not stopping after seeing error, there is no problem with it I get those sometimes too.
If nothing changes in page, it is because of you did not run the command below.
php artisan serve
Then open your app with the port this command gives to you(usually 8000 if it is not taken by other service). And you will see your js and css work properly.
If it was helpful I would be thankful if you vote and verify my answer. Ty:) <3