I have a laravel project that uses Admin LTE as theme, the js and css assets compile well in localhost but when I run the same project on heroku, it says app.css, app.js, Uncaught ReferenceError: Livewire is not defined and popper js not found.
I have tried
forceScheme('https') in AppServiceProvider but it still does not work
NPM install and npm run prod
How can I solve the problem, because it seems when on the heroku server the public folder where there is the app.css and app.js is not accessible
Related
I am trying to use auth in laravel and while the auth controllers and views are created properly, the css / js files are empty. I have tried npm install and when I run npm run dev but no luck with CSS / JS.
First post.
I'm currently building a Laravel Nova application. I'm making changes to the dashboard component - more specifically the file within the "resources/js/views/Dashboard.vue".
I'm struggling to build the component - does anyone know how to build the component? I have some code which runs webpack.mix to build my JS and SCSS files, but I'm pretty sure it doesn't include the files within the Laravel Nova instance.
Any help will be great.
EXTRA:
I've already tried run the webpack command to build from inside the Laravel Nova instance but it errors out.
UPDATE
I found renaming my webpack.mix.js.dist to webpack.mix.js, running npm run dev whilst within the ./nova directory worked... but only after running php artisan nova:publish
I've wrote a command to compile all these steps but do I have to run php artisan nova:publish everytime, just seems...tedious?
By default, Nova's JavaScript is compiled for production. As such, you will not be able to access the Vue DevTools out of the box without compiling Nova's JavaScript for development. To accomplish this, you may use the following terminal commands from the root of your Nova project:
cd ./vendor/laravel/nova
mv webpack.mix.js.dist webpack.mix.js
npm install
npm run dev
rm -rf node_modules
cd -
php artisan nova:publish
Details: https://nova.laravel.com/docs/2.0/customization/frontend.html#vue-devtools
I have downloaded a free HTML theme.
If I open index.html file of the theme in the browser it works perfectly.
However, now I need to integrate this theme in my Laravel Application. If I inspect element in the index.html file loaded in the browser, I can see that some .scss files are getting called.
The scss folder is present in the theme folder but I really don't know how to include this into my project
You can think of SASS as high level css which provides you with more features like making variable and easier css syntax etc ... but since browsers doesn't understands SASS you have to compile SASS into CSS there are multiple ways to do that.
First if your theme folder already has complied SASS (CSS Folder) you can use it if not and want to integrate with Laravel please follow these steps
Copy everything in your SASS Folder and place it in "/resources/assets/sass" so
they can be found by Laravel to be compiled
now you have to compile SASS into css you can use gulp manually or make use of
Laravel mix which is already implemented for you by Laravel
Laravel Ships with packages.json file you will find that in your app root
directory so before being able to compile SASS you have to run npm install in
your root directory (make sure that you have npm and node installed)
after running npm install now you can run either one of these to compile any
sass files you have in "resources/assets/sass"
npm run dev //this will compile one time only
npm run watch //this will automatically watch for any changes and compile
Now your sass files should have been compiled to css you can find the compiled css files in your "public/css" folder.
Hopefully you found this helpful you can read more about this in Laravel docs frontend section specifically Laravel Mix here
Laravel has a file called webpack.mix.js where you edit all frontend assets compilation by calling the mix.js/sass with the respective arguments. It is located at the root of the project.
1- In the resources folders create a new folder and call it scss with a app.scss file. The complete tree will be scss/app.scss
2- Go to the webpack.mix.js and add a new line: mix.sass('resources/sass/app.scss', 'public/css');. The first argument of the method is the source file, and the second is the destination folder.
3- In the app.scss file import all the theme scss files using #import 'file/source';
4- Open terminal/cmd in your Laravel project folder and Run npm run dev/watch to compiled your scss file, and at end your css file result will be located in public/css/app.css.
5- Import the app.css into your Html head section and reload the page. If the styles do not work, press ctrl + f5 to clean browser cache.
The latest version of Laravel utilizes a tool called Vite as a replacement for Laravel Mix.
In order to use Sass with Vite, make sure that Vite and Sass are installed run npm install and npm add -D sass
Make sure you have a sass or scss folder in your projects resources directory, and an scss file inside like app.scss
Make sure that you have configured vite.config.js (which can be found in a new Laravel projects root directory) to include an entry point for sass like so, utilizing the correct path and name for the folder you made:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: ['resources/scss/app.scss', 'resources/js/app.js'],
refresh: true,
}),
],
});
And in your Blade files add the following, again making sure to use the correct path for the folder you made:
#vite(['resources/scss/app.scss', 'resources/js/app.js'])
Then you can build your sass using Vite by running npm run build
I created a Laravel project using
composer create-project --prefer-dist laravel/laravel myProject
Then I installed Bootstrap-4 using
composer require twbs/bootstrap:4.0.0-beta.3
My bootstrap dist directory is
vendor/twbs/bootstrap/dist
I copied bootstrap-min.css to public/css directory. Then I added this line in my head tags
<link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet">
But Bootstrap-4 is not working on my page. Which file has to be changed now?
Copying composer files directly into your public folder is generally bad practice. Not only is the public/css folder in the .gitignore file so it will break when you port over to production, any downloaded updates will not be applied if you update the package.
Laravel News has made a front end preset for Bootstrap 4. Laravel 5.6 will have Bootstrap 4 as a preset option baked in, but for now, this is the way to go https://laravel-news.com/bootstrap-4-laravel-preset/
You could also just use Bootstrap straight from the CDN
When you install bootstrap via composer it's put in the vendor/ folder, which is not accessible by your webserver. You have to copy or symlink the css and js into your public/ directory:
cp vendor/twbs/bootstrap/css/bootstrap.min.css public/css/bootstrap.min.css
cp vendor/twbs/bootstrap/js/bootstrap.min.js public/js/bootstrap.min.js
Since bootstrap is a frontend dependency I would instead use gulp or maybe Symfony's Webpack Encore for managing this: https://symfony.com/doc/current/frontend/encore/bootstrap.html
Webpack Encore is a standalone component that should not require any modifications in your laravel appand does not rely on any other Symfony component as far as I know. If that is a concern you have.
I run php artisan make:auth command in laravel 5.3, it generates the scaffolding for me but the view styles are missing.
Login and registered views are not styles, they are just simple html.
Double check source code if the styles links are linked correctly or not ?
Check views code and in there check for the link and script tags . You should use something like this to link the css and scripts etc
{{ url('styles.css') }} It will grab the styles from your app public directory.
In your project_name\resources\views\layouts\app.blade.php view file, just remove first slash in css path - instead of:
<link href="/css/app.css" rel="stylesheet">
put:
<link href="css/app.css" rel="stylesheet">
You will probably need to do the same for js path.
npm install
npm run dev
Once the dependencies have been installed using npm install, you can compile your SASS files to plain CSS using Laravel Mix. The npm run dev command will process the instructions in your webpack.mix.js file. Typically, your compiled CSS will be placed in the public/css directory:
https://laravel.com/docs/5.8/frontend#writing-css
You need load file .css and .js
1) execute in your project
npm install
2) then execute
npm run dev => now in folder /public now exist folder js and css
3) reload page