I create company profile website using laravel 5.8 and vue js for make it reactive, it's not SPA(single page application) maybe we can call it hybrid, everything run well in local, after i modify javasacript locally then run a command yarn watch to compile and run my web again it runs well. let's say i have uploaded my project to shared hosting. then i modify my javascript code then re-upload my app.js code and here's a problem. the browser loads my previous app.js not my new app.js. i have cleared browser cache it's sill load the previous app.js. how to solve this problem?
thanks
put a random number at the end of address like this:
<script type="text/javascript" src="app.js?v=12392823"></script>
Better option is to add .version() to your webpack mix file:
mix.js('resources/js/app.js', 'public/js')
.version();
After that, when you call mix('js/app.js') in your view, it will add the cache busting get parameters automatically and the parameter will ONLY change if the file has been changed.
Related
I have aproblem. I built a project using Laravel 5.8 and it depends on the select2 plugin. I did everything correctly. But after compiling the project
npm run dev
I have the following exception:
Uncaught TypeError: $(...).select2 is not a function
I know what has to be done. jQuery is connecting twice in this project. At first in my .blade.php:
{{asset('adminlte/bower_components/jquery/dist/jquery.min.js')}}
and a second time after compiling (npm run dev), the Laravel, by itself, does it in public/js/app.js
window.$ = window.jQuery =
__webpack_require__(/*! jquery */ "./node_modules/jquery/dist/jquery.js");
If I delete this code, I don't see the issue and select2 works correctly.
Here is the compiled code from public/js/app.js
It says: code may be modified to fit the specific needs of your application.
Does anyone know how to hide this line after compilation?
Or should I delete this code after each compiling turn?
You have to remove it from the source file which is at resources/assets/js/bootstrap.js and compile it again with npm run dev.
Or you could just import select2 inside that file so the user has to download fewer files.
You should never modify the compiled files in public/ since the changes will disappear after compilation.
I have some issues with using React in Laravel 5.5. Every time I add or make changes to a component, I have to run npm run dev to compile the thing. When I do this the contents of css/app.css get reset, so I cannot write styles to this file.
Styles get unchanged if I have them in another CSS file, but I'd like to have my main styles written in css/app.css.
How can I do this?
Keep all your css styles in a file in your resources directory and add the below code to end of your webpack.mix.js file.
mix.styles('path to your css file in resources directory', 'public/css/app.css');
If you are using sass use the below code
mix.sass('path to your css file in resources directory', 'public/css/app.css');
Also you no need to run npm run dev each time you make changes to your components. just run npm run watch and it will continuously look for changes and re-compile the components if anything is changed.
I started using libraries like jQuery or Twitter Bootstrap with composer. Now I want to load the jquery.min.js from /vendor/components/jquery/ into my /src/Template/Layout/default.ctp.
How can I do that?
Because using a normal uri doesn't work:
<script type="text/javascript" src="/vendor/components/jquery/jquery.min.js"></script>
Cake doesn't interpret the file as a file. It looks for a Controller:
Error: VendorController could not be found.
How can I load the JS-file properly?
This question is perhaps a little broad, but you probably want to look into using something like Gulp or Webpack to build your assets from the Composer files to your app's webroot. These will also enable you to concatenate and minimise all your JS/CSS assets to improve performance. Although personally I'd probably use a CDN to deliver a library like jQuery as it is so commonly used on the web that you can benefit from cross-site caching.
The reason why you are getting an error like "Error: VendorController could not be found." is because Cake can't find the 'vendor' directory inside 'webroot' so is looking for a Controller instead due to the way it handles magic routes (this bit in the routes.php file $routes->fallbacks('DashedRoute');).
If you don't want to use a tool like Gulp or Webpack you could symlink the relevant files in your webroot folder, but personally I'd use my initial suggestions as these will give you many other benefits. If you do symlink just make sure you don't symlink the entire vendor directory as you don't want to expose all the code in there.
You should place all your js in /webroot/js folder. You can use it inline by using:
echo $this->Html->script('jquery.min');
this would load : <script src="/js/jquery.min.js"></script>
Using latest angular-cli, I created new project and everything works fine. Next, I tried to integrate it in Laravel 5.3. I have this project working with systemjs, but I want to switch to webpack and to take advantage of angular-cli.
Problem is that in angular-cli.json I can't specify that index is index.php, it only accepts HTML.
Basically, I can't start the Angular application at all with this setup.
How can I overcome this?
In the end I separated Laravel and Angular 2, as Cristian Sepulveda wrote in the comment. This is the recommended approach anyway.
I make API with Laravel and use it with Angular 2.
In my case I serve the angular app from laravel. I still use webpack to build my assets but have a gulp task which copies the angular index.html to be index.blade.php of which the laravel app serves.
I also use gulp to copy the built files from /dist to /public
I had the same problem and what I found is this related issue in their GitHub issues:
The output folder will always be entirely replaced. You can use the public/ folder to have your index.php which will be copied to your output folder, or output the app to a separate folder and copy the files yourself.
This is by design and will not change. This is a build output folder, not a deploy folder. You should separate those two steps.
So, you can't really achieve what you exactly want, but this is the only workaround I found.
I found only one solution for me.
create build for client side code by ng build --prod
Using gulp copy generated files into Laravel public dir gulp copy (here you can check if old build files exists remove them)
Using gulp-ingect plugin inject copied files into layout gulp inject
-- This can be used in CI and done with automation tools. In result we have inline.js and three *.**.bundle.js files injected. In same main layout i have statically add <base href="/example"> (you can use any defined in Laravel routes root path here) and inside template file which loaded from this path (in my case 'example.blade.php') add angular 2 root element <st-example>Loading...</st-example>
-- By this set up you have root Laravel layout which have inside required by angular 2 root url href and injected scripts files from build. And your template file for current route have root element inside (it included to main layout by simple blade yeild('content')).
P.S. also you must notice that if you are using some http requests in angular 2, after you integrate it into Laravel project this will add csrf protection middleware to each request... And if you have some new errors in requests which work previously just check headers.
Since angular-cli doesn’t allow you to specify index.php, let it be, simply specify index.html then there…
And add an appropriate route into Laravel routing. Like this one, for instance:
Route::any('{path?}', function () {
return File::get(public_path() . '/index.html');
})->where("path", ".+");
Btw, it’s simply a trap for any unknown routes… But I think you get an idea.
I have an app.less that imports everything (less) else if I comment a line in app.less app styles doesn't render the commented part, but if I change something in that imported less file, anything changes, I have to do cache:clear and to clear the browser cache to see the new style loaded...
Assets that are imported from another stylesheet (less, sass, whatever) will not be recompiled when they change, even if you use php app/console assets:dump --watch. See another question on StackOverflow and this issue in the AsseticBundle issue queue.
I came upon the same problem. This is caused because LESS is using your window.localstorage to save the rendered css file. For testing you could put in javascript
<script> /* Provisory for dev environment: */ window.localStorage.clear(); </script>
however this causes your page to load really slow. i have not found another options for this just yet.