I'm developing project using vuejs and Laravel. everything worked fine on my laptop and when I upload code to server (Digital Ocean) at that first time.
Otherwise, when I update some Vue component in resources/components folder and upload it to server again. It's seem component is not update on the server when I refresh the browser.
my code in \ webpack.mix.js is
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
if (mix.inProduction()) {
mix.version();
}
and I try to run npm run dev or npm run prod on the server after I push the nw code on it as well. It doesn't work.
I also try to clear browser cache and reload url again, it doesn't work also.
Please give me an advice how should I do.
Regards.
Well its not a good idea to upload a laravel/vuejs project at shared hosting. Although doing such process can save your life.
Run php artisan serve view:clear
Do changes at your local file and then npm run watch.
after uploading all the changes to server, always replace public/css/app.css & public/js/app.js files.
Related
I am having issues with a fresh installation using docker + laravel + vite.
I can currently load the blade template successfully, however, when I load my file in resources/js/app.js, it is failing as it cannot find the file.
In my blade template, I use #vite('resources/js/app.js') to load this file.
If I run npm run build it loads the file successfully, but if I am working with them by using the HRM npm run dev, laravel cannot find this file.
How can I resolve this? Should I move to mix for this?
Vite port was not exposed in my dockerfile. Now it works perfectly :D
I am working in project having technology(laravel + vuejs).In that there is a form created in vue file and i want to add a text in the vue file.So as i have seen that "when any changes is done in vue file then need to rebuild the application".And i see that there are commands for rebuild the application is npm run dev , npm run prod , npm run watch and npm run watch-poll. I have tried all this commands after saving the file through FTP but sometimes the changes is applied (Note : Not immediately but after some duration) and sometimes no changes apply in the browser.When i tried the above command by executing it then there is no such error occurs and the rebuild is done successfully.So what will be the issue can you please suggest something that i need to configure?
Below is the code of package.json,webpack.mix.js file and after that i have attached image of putty in which application rebuild is done.
Thanks in advance!
I think you are not understanding what npm run dev/prod/watch do. If you alter the .vue file in your resources folder, then have npm rebuild your assets, then ftp the vue file to your server, nothing should happen.
Depending on how you have your laravel mix file set-up, the file you need to ftp to the server is likely public/js/app.js.
You should really consider getting your local environment setup for development, there is nothing I can image worse than viewing your changes by ftp-ing files to a server.
i want to deploy the App of laravel with inbuilt vuejs
on my local i just run the "PHP ARTISAN SERVE"
and boom its works for me
but what about the live ?
its not working on live server
my .htaccess and index.php is in public folder
for Laravel we just move the index.php and .htaccess out of public folder and edit some code lines and it will work.
but how it will work with vuejs templates ?
Follow these steps:
Please create a zip folder of your project except the vendor folder.
Deploy the folder on live and extract.
Change your DB and other configuration in env file.
In the terminal on live server, run this command : composer update
After the installation, look for your front page.
Hope it should work fine.
I am developing a Laravel-Vue app using Laravel/Homestead. The Vue code is compiled using laravel-mix, all using fresh installs (it's a new project).
I would like to be able to test my Vue components 'outside' of the Laravel project. So I figured I just
1) Add a script in package.json like this
"devser": "cross-env NODE_ENV=development webpack-dev-server",
2) Add an entry point main.js file in which I can run my components isolated
import Vue from 'vue'
import Example from './components/Example.vue'
new Vue({
el: '#app',
render: h => h(Example)
})
3) add a webpack.config.js file to configure webpack for this isolated app. I just took it from the vuejs template: webpack-simple and changed the entry point path.
So far, running the devser script does compile the code without errors, and apparently, the code is served at (webpack output)
Project is running at http://localhost:8080/
webpack output is served from /dist/
404s will fallback to /index.html
However, opening localhost:8080 gives an error: This site can't be reached, localhost refuses to connect. So I have been searching for a while and found things about devserver proxy's and stuff like that but I don't understand what I would need to add to my webpack.config.js.
Maybe good to note: I am not interested here in calling the Laravel backend from these Vue components, it is just for testing the components in an isolated way. My next step was to add Vue-storybook to the party to do this.
To summarize, I am looking for one codebase (Laravel + Vue on Homestead) where I can separately test the components. Any help would be appreciated.
EDIT: If I am not logged in to the vagrant machine, I can navigate to the project folder and run
npm run devser
which serves the project at localhost:8080 and this URL does work. So I have a workaround for now.
It sounds like you are running webpack-dev-server inside your Homestead box. If so, you need to forward port 8080 from your host to the Vagrant box:
https://laravel.com/docs/8.x/homestead#forwarding-additional-ports
Add this to your Homestead.yaml:
ports:
- send: 8080
to: 8080
Then, run vagrant reload --provision to apply the changes.
Now you should be able to view http://localhost:8080/
I'm trying to use browsersync with Laravel. I followed this tutorial from laracasts but my browsersync isn't syncing.
Here's my gulpfile:
var elixir = require('laravel-elixir');
elixir(function(mix) {
mix.sass('app.scss');
mix.browserSync();
});
My app is homestead.app. So, after starting gulp watch, I go to homestead.app:3000 and see my app without BrowserSync.
I go to homestead.app:3001 and I can access BrowserSync dashboard, which shows this:
Local
http://localhost:3000
External
http://10.0.2.15:3000
Proxying:
http://homestead.app
Current Connections
Connected browsers will be listed here.
Local and external links not responding.
No matter what I did, I couldn't see any connection in Current Connections tab.
What I tried:
tried running gulp watch from my local environment instead of homestead.
This time both Local and external links were pointing to my app, but no syncing.
I'm using windows 8.1
Any help would be appreciated.
Well, after trying to achieve the desired result for couple of hours I decided to go with plain old gulp, rather than Laravel Elixir.
I removed the node_modules folder, cleaned up the default package.json and gulpfile.js files and customized them, then ran clean npm install.
After that, i used gulp watch on my local machine. Also, i went with LiveReload instead of BrowserSync.