Github browser preview doesn't show slider nor bootstrap icons

Question

I am new to GITHUB and NODE.js and I've tryed to put a page online on GITHUB but the way I see it is different from the way it shows up on my LOCALHOST.

Basically in the GITHUB link I can't see the OWL Carousel I used nor the Bootstrap Icons. While in my LOCALHOST it works properly.

What am I missing here?

Web page: https://lfavilla.github.io/rastelli/ Repository: https://github.com/lfavilla/rastelli

Tushar Gupta - curioustushar · Accepted Answer · 2021-03-19T08:23:45.847

0

Your resources are loading from node_modules which is not available on github, it shouldn't available on git.

you are trying to load resources like https://lfavilla.github.io/rastelli/node_modules/jquery/dist/jquery.slim.min.js

Run npm run build on your project and update git with build folder

In your index.html file use CDN version of jquery

Change

<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>

to

<script src="https://code.jquery.com/jquery-3.6.0.slim.js"></script>

Also, change your bootstrap icon references to CDN

https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/icons/chevron-down.svg

you can find icons CDN here https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/icons/

edited Mar 19 '21 at 08:23

answered Mar 18 '21 at 16:22

Tushar Gupta - curioustushar

58,085
24
103
107

My project in github was already done like this. I rerun "npm run build" and there are no updates to be commited. Thanks for you time and support. – Luciano Favilla Mar 19 '21 at 08:05
@LucianoFavilla Updated the answer, try hope it works for you. – Tushar Gupta - curioustushar Mar 19 '21 at 08:24
I sse that my "starter.js" points to node_modules: import "../../node_modules/bootstrap/js/dist/util.js"; import "../../node_modules/bootstrap/js/dist/modal.js"; import "../../node_modules/owl.carousel/dist/owl.carousel.js"; Should I change this? – Luciano Favilla Mar 19 '21 at 08:52
@LucianoFavilla yes you should use CDN version bootstrap and carousel or you can extract them into the root folder and upload them to the github repo. – Tushar Gupta - curioustushar Mar 19 '21 at 08:55
1

the Carouosel now works with CDN. Thanks a lot! But the Bootstrap icons don't. If I go to the SGV link I see it, but on my page they are not loaded. – Luciano Favilla Mar 19 '21 at 11:16
@LucianoFavilla Cool, try this https://stackoverflow.com/questions/39617188 – Tushar Gupta - curioustushar Mar 19 '21 at 13:02
@LucianoFavilla you can download svg icons to local assets directory and use it. – Tushar Gupta - curioustushar Mar 19 '21 at 13:11
Thanks once again @Tushar-Gupa. The problem now is that changing it to IMAGE I can't only use CSS to change icons sizes and colors. – Luciano Favilla Mar 19 '21 at 18:10

Github browser preview doesn't show slider nor bootstrap icons

1 Answers1