Bootstrap assets only load when putting the assets folder in public folder

Question

I'm starting to build a react project that includes bootstrap.

I am using an assets folder from BootstrapMade.com

the bootstrap works find when I copy the assets folder inside the public directory and include the js files in my index.html using:

  <script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

But, when I copy the assets folder to the src folder and try to include the js files in my index.html using:

  <script src="../src/assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

The bootstrap won't work. and I've been told that it's not advisable to put the assets folder in the public directory.

I am using create-react-app with vscode.

Answer 1

You will need ES modules for this
check more on ES modules here: https://webpack.js.org/guides/ecma-script-modules/

Webpack server does not serve the content from inside src. It only bundles them. So you cannot use <script src="path_to_src"> to access its contents. But <script src="path_to_public"> can be used for public directory because contents of public are served as static assets by webpack dev server.