I deployed Laravel with Tailwind css on Heroku and my vanilla CSS for the home page is working fine but when I add /login to the address to move to laravel breeze login page, Tailwind css isn't loading.
This is the link for the homepage: https://zarafah.herokuapp.com/
And this is the login page which tailwind is not rendering: https://zarafah.herokuapp.com/login
When i checked the network tap on google chrome it shows like this:
enter image description here
This is driving me crazy because on my local serve everything works perfectly.
I ran npm run prod and npm run production and made sure of everything but still I can't find out what is the issue.
I'm using Laravel 8 with Tailwind css v3.
you have a http link for the css
change it to https
https://zarafah.herokuapp.com/css/app.css
and it should work
Related
im workin with LARAVEL and vue. i'have launched a project on digital ocean using ubuntun and nginx. Since the launch i'have add more features. Today i pulled those change on the production server, but they do not appear on the browser..
Using nano i'have chechked all the files, and yes, the files have changed but they do not reflect on the browser.
I'have used
npm run dev, npm run watch
php artisan config:cache, php artisan cache:clear but yet it doesnt seems to work
any idea ?
Before you push your updated Vue files you need to run npm run prod to prepare your assets as production ready.
Laravel uses mix to compile assets: https://laravel.com/docs/8.x/mix
Now you have your freshly compiled assets in your public/ directory, therefore you can pull to digitalocean machine. But now the browser might still be using cached asset (if name stays same, browser doesn't fetch same asset again for a while)
So, Mix Versioning comes to help: https://laravel.com/docs/8.x/mix#versioning-and-cache-busting
In your webmack.mix.js file you need to add .version() at the end of mix piping. End result will be something like this;
mix.js('resources/js/app.js', 'public/js')
.version();
As you want to use versioning, now you need to resolve asset urls with mix(...) instead of asset(...) in your blade files;
<script src="{{ mix('/js/app.js') }}"></script>
Now whenever you compile your assets, mix will assign them new version numbers and will at them to end of assets' urls in your blade. Browser will understand there is a update in file (because of a different version number) and will fetch updated asset.
Did you clear your browser's cache?
If you are working with Vue and/or Sass and therefore your files are changing from time to time, I suggest you to use mix() instead of asset() for cache busting. Otherwise all of your users will have to delete their cache (this is obv. not a good approach)
https://laravel.com/docs/8.x/mix#versioning-and-cache-busting
I have an application which has developed on laravel 5.7 and it's index.php is moved to root directory. Now when i tried to make the server up using php artisan serve command.
The website was loading but assets files like css and js not loading. Entire console showing errors and when i tried to see the asset file code through http://localhost:8000/assets/js/app.min.js
It was showing Error 404
The page you are looking for does't exist.
Can any one help me i am trying to resolve from past two days
Entire app is loading only view is not proper due to non loading of asset files
My components are not being rendered when I upload my project on a live server. It works fine on my local machine after I run npm run production when I upload the changes none of the vue components are being loaded in the page. On my local machine the vuejs dev tools tells me the site is running in production but when I go to the live server in the console it says
You are running Vue in development mode.
and on the browser taskbar it says
Vue.js not detected
I have no idea how to fix it. I saw a post saying I should upload the node_modules folder to the live server. But I doubt that would change anything plus it would take too long. How can I fix this?
I found out that the server was loading an older copy of the js file. So I had to apply cache busting by adding a phantom query to the end of the file. <script type="text/javascript" src="/js/app.js?v=2.4.1"></script>
I installed laravel 5.6 and used a template i purchased from themeforest. I have all the css and js files in version1 folder (public/version1/app.min.css and public/version1/js/app.min.js). Then i modified the template as per blade rules and the website renders good. I want to use a javascript framework for frontend with this template for creating SPA applications so that i can view other pages without refreshing. I checked react, loved it however i see vue is good too with laravel.
I ran php artisan preset vue and npm install && npm run dev
Are there any other steps im missing? I have searched alot and couldn't find a single resource on how to use a template (purchased) with vue and laravel.
Any links to get me started would also help me. I have the links for creating crud with vue.
Followed this link and made the following changes
I placed all the css files in resources/assets/css folder and all the js files in the public/js folder.
Updated the webpack.mix.js
mix.js('resources/assets/js/app.js', 'public/js')
mix.styles([
'resources/assets/css/app.min.css',
'resources/assets/css/primary.css',
'resources/assets/css/style.css'
], 'public/css/app.css');
Now everything is compiled into public/css/app.css and the theme is rendered without any issues.
I have a laravel project running on laravel valet and I can't get the vue dev tool to work on it.
Here is what it says:
Vue.js is detected on this page. Devtools inspection is not available because it's in production mode or explicitly disabled by the author.
I have gone to manage extensions and selected allow access to file URLs.
Any help would be greatly appreciated!