0

Webpage error 

<!-- Scripts -->
<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>

I am not sure how get my css, bootstrap, and popper to display on the webpage when deployed. It works fine on local.

Telly Lowe
  • 1
  • 2
  • What do you mean by deployed? I'm not familiar with this term. – SirSpeciam Jun 06 '20 at 20:55
  • @thespeciamone it means a build is made of the site and it is on test/production server. – Dejan.S Jun 06 '20 at 21:10
  • Oh yeah, otherwise you could include the node_modules and js cs folders (I think the are folders) on the test server and make sure the hrefs are calling for the right directory like `.../node_modules` or `node_modules`. Otherwise you could try Dejan's approach. – SirSpeciam Jun 07 '20 at 02:26
  • Thanks for that advice. I added the cdn links and scripts and the website overall works but some of my bootstrap and FA icons are still missing. I will have to play around with it some more – Telly Lowe Jun 07 '20 at 19:41
  • @thespeciamone It is never an option to add your node_modules into production. You should have a build step to make a vendor.js (or whatever name) or use cdn. – Dejan.S Jun 08 '20 at 06:06

1 Answers1

1

When you publish your site you don't have the node_modules folder on the server, don't worry you shouldn't have it there. Replace the node_modules with cdn links instead. You will find alot of cdn sources on cdnjs.com, but a few libraries have their own (like bootstrap), here is jquery for example https://cdnjs.com/libraries/jquery.

<!-- My links -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" />

<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Dejan.S
  • 18,571
  • 22
  • 69
  • 112
  • @FlashThunder What does external libs mean in this context? Please elaborate on that. CDN is a distributed network and a very effcient way to deal with things like this, it's a common approach. – Dejan.S Jun 06 '20 at 21:09
  • I wouldn't trust that, would just upload the files to the server. – Flash Thunder Jun 07 '20 at 13:30
  • @FlashThunder What is there not to trust? Downtime? CDN does not just apply for files, but for whole webpages, ALL the big sites does it so the files gets served closer to your destination. https://www.cloudflare.com/learning/cdn/performance/ – Dejan.S Jun 08 '20 at 06:05
  • yes, downtime, corona virus, end of the world, whatever ... using external links on own site is not a good idea imo – Flash Thunder Jun 08 '20 at 15:21
  • @FlashThunder if you don't want to use CDN then you need a build process in place, depends on your frontend setup but Webpack is popular, there are a few other with less setup. There is also "old school" Gulp. – Dejan.S Mar 17 '21 at 08:46