Folder image
Even though I have done the following commands,
"php artisan breeze:install
php artisan migrate
npm install
npm run dev"
the build folder is not generating.
I am new to Laravel and I start my Laravel project using php artisan serve but I found that I also have to load Vite from another command prompt using npm run dev in order to make Laravel project run properly is there any method to autoload Vite when I do php artisan serve
when Vite is loaded my code works correctly
scripts in package.json
"scripts": {
"dev": "vite",
"build": "vite build"
},
Cause of Problem:
In older versions of Laravel we were using laravel-mix package but now laravel js compiling engine is shifted to vite and it is much more faster.
In the case of mix engine whenever we run npm run dev generate compiled js code in public/js directory. and due to it we need to refresh page manually everytime.
But now In vite when you run npm run dev it just starts a vite server that continuously monitor your changes and reflect those changes on screen immediately. but it's not generate compiled js files in public/js directory
So, when your vite server not running it shows above error.
Solution:
If you want to run laravel without runing vite server by npm run dev you will need to run npm run build. It will generate compiled js files in public/js directory so then you will not have need to run vite server.
Caution: if you run npm run dev after the npm run build command your compiled templates will be removed. So, you will need to run npm run build once again after stopping vite server which is running using npm run dev
npm run dev
with vite is basically what
npm run watch
used to do back with mix.
If you focus on your back-end, try to run prod instead, so that your main page works while you deal with laravel.
Once you get to front-end work and need your js running, you need to have vite up during development. At any point you can stop the process, run a quick prod build and get back to whatever you want.
npm and artisan are two different tools that have nothing to do with each other. They need to run seperately.
You can extend your package.json to automatically start both with npm run serve:
{
...
"scripts": {
...
"serve": "php artisan serve & npm run dev"
},
...
}
It's because of your Node version. Check your Node Version
node -v
if it's below 16, you should upgrade it to the latest one then run
npm install && npm run dev
I am trying to find a simple way to run npm dev and php artisan serve using a single command. I have created a new script within package.json and run the command via npm run start. This may come as obvious to most, but I thought it was an interesting idea that obviously can be expanded upon.
Here is the command below in case anyone has this idea down the road and doesn't want to spend an hour looking into it like I did.
"scripts": {
"start": "(php artisan serve) & npm run dev"
}
I tried to run serve -s build in my React app after running npm run build.
I get the following error.
Could not open input file: artisan
I think this artisan is from Laravel. How can I run npm serve command rather than Laravel's one.
Running composer install on a production server via a bash script is failing at post-install-cmd php artisan optimize with the error There are no commands defined in the "jwt" namespace.
To try to resolve the issue I added the following commands before php artisan optimize
"php artisan clear-compiled",
"php artisan cache:clear",
"php artisan config:clear",
"php artisan config:cache",
Running composer install locally works fine. I can run the commands through a script locally without a problem.
The failure is happening while running composer install through a script on the production server. If I log onto the server and run the commands manually I do not generate the error.
Not sure how to debug, any ideas?
Try adding a pre-install event inside of your composer.json file on the server, note that this event works only if your composer.lock is present and you ran composer install:
"scripts": {
"pre-install-cmd": [
"php artisan config:clear"
],
...
}