I am working on an ongoing project and I am unable to recompile assets for vue.js I have deployed the project successfully on my machine with successfully with already compiled assets but when I changed anything the vue and recompile the assets with “npm run dev” or “npm run watch” command it shows me message that build successful but changes are not applied, I want to mention one thing here that in my case “app.js” is replaced with “vue-app.js”.
I think you have to replace app.js in webpack.mix.js by your new file vue-app.js
Related
I used jetstream laravel authentication and I used npm run dev and keep it running on my cmd while I developed my project locally. Everything was OK till here. But now I want to upload on a shared hosting. And I got it that I need to run npm run build now. I have run it locally and uploaded the files but my ui of my project has been all scattered and misplaced. So I know I have missed a/some steps. What really have I missed out or have wrongly done.I am stuck now.
Regarding my web hosting ,I have my project files outside the public_html. All the public files are moved in this folder public_html.My database and my application working fine except the ui is messy.
I have find out a way but still do not know whether it is the best solution or proper one.
What actually the scenario is that the build folder of the npm run dev is folder project_folder/public/build but I have my project files outside the public_html folder. So it was unable to find the manifest.json in the folder project_folder/public/build. It was not working ,the UI is very ugly. Then, I put only the manifest.json in project_folder/public/build but the app.####.cs and app.###.js is kept in the public_html/build/assets. And now it is working fine. Hope this help someone like me, even though it might not be the right approach.
I am trying to make changes to the Spark Laravel BillingPortal.vue page. After making a change I know the the app.js is being compiled but I see no change in the billing page.
I have cleared the cache in Laravel and the browser and still not luck.
I can completely delete all code on the page and still nothing happens. It is still the same in the browser.
Please tell me how to change this file.
The BillingPortal.vue file compiles into Spark's /public/js/app.js file, so in order to see any updates you'll need to rebuild Spark's JavaScript separately from your application's assets.
cd vendor/laravel/spark-stripe (or vendor/laravel/spark-paddle if you're using Spark Paddle)
npm install
npm run dev
That being said, it's not recommended that you make changes to Composer packages because the changes will be overwritten when the package is updated. Instead choose one of the options mentioned in these answers
I have a fresh installation of laravel 5.4.
I have successfully created a new component and displayed it correctly.
I use npm run watch and my .vue files get compiled correctly.
But now, any changes I make to the .vue files do not get updated.
I purposely made errors to them to see if they compiled but they failed, so I conclude that the watch command successfuly sees changes made to them, on the other hand, nothing updates in the browser (only blade files update).
Any ideas what this could come from ?
PS: I tried php artisan cache:clear but no success.
Silly, the name of the component had a dash in it:
Vue.component('cardtest-component', require('./components/CardTestComponent.vue'));
It was just a typo.
Image folder changes are not reflecting in the angular2 application, Unless i start server again by doing ng serve. How can i keep watch on particular image folder, if images are getting updated,deleted
structure: src/images
Would be great help !
As per my comment, this is expected functionality when using ng serve. The cli does have some documentation on how to mimic ng serve with the ng build command. https://github.com/angular/angular-cli/wiki/stories-disk-serve
This way ng build will actually write to the disk and the watch flag will allow your app to rebuild. Now the updated assets will be available.
Original Comment
This is expected functionality of the angular cli. ng serve starts up a webpack dev server and loads your assets into virtual memory. You are required to restart your webpack dev server (ng serve) whenever your assets folder changes
I'm using Mix (this applies to Elixir as well i guess) to manage my frontend assets. I have Mix configured to version files in production but not in dev. As such, when i update assets, i get updated app.js and app.css files in dev and app.{hash}.js and app.{hash}.css files in production.
What is your advice on how to leverage this with version control?
Put the files in version control? If so how do i manage the constant changes during development? Keep adding new hashed files? Do i leave app.js and app.css on the production server?
.gitignore the js and css files and run npm on the production server to compile the assets locally?
Some other solution?
What are your thoughts on this?
Thanks in advance.
At my workplace we've .gitignore'd the css/js folders for almost a year for different projects with no issue just letting the server handle npm as part of it's build step.
And if you use yarn, it'll create a lock file which ensures you'll get the same exact js dependencies on production.
When using versioning just use the mix() helper on your script/css tags and it'll handle pointing to the correct file via the mix-manifest.json file in the public directory.
For example:
layout/app.blade.php has
<script src="{{ mix('js/app.js') }}"></script>
when you run npm mix creates the the public/mix-manifest.json file like so
{ "/js/app.js": "/js/app.{hash-example}.js" }
The only issue I've seen is with mix and using the mix() helper it appears to only work while npm watch is being run, which is something elixir handled fine before but mix is relatively new so it might get addressed, I myself haven't been annoyed enough to look into it since during development I always run npm run hot which does hot reloading on any js file changes. -- Edit: this appears to be fixed now
rewrite app.{hash}.js to app.js with nginx and add its to gitignore