How to integrate external dependencies in a web app

Question

I am writing my first web application using npm, nodejs and react components. This is all rather new stuff for me.

I need to deploy this web application on an server in a LAN. Both the server and the clients have no access to the internet. I followed some tutorials to instantiate my first implementation of the web app. The problem is that now the web application references libraries and css via CDN links (eg specified in index.html).

My question is if there is a standard and automatic way to build the web application so that the building process would automatically download all the external dependencies and convert all the references from the outside world to the local paths.

Answer 1

You can use nodejs to do that.

Here is an example that you can use with gulp to copy all dependencies to a vendor folder using gulp-npm-dist : https://www.npmjs.com/package/gulp-npm-dist

This package will automatically download and copy your vendors based on your package.json . This is the easiest way to do it and you can easily update and manage all your packages versions with this method.

Please let me know if you have any question.

Karim

Answer 2

My question is if there is a standard and automatic way to build the web application so that the building process would automatically download all the external dependencies and convert all the references from the outside world to the local paths.

You need to use module bundler like webpack.

Then the basic app would look similar to this:

Project structure:

..
src
    ..
    js
        ..
        <your react files here>
    css
        ..
        <your css files here>
    index.htm
    index.js
package.json
.babelrc
webpack.config.js

index.js

import 'some/library/from/node_modules';
import YourApp from "./js/YourApp.jsx";

So then you could be able to bundle your React app with css files, fonts, js libraries etc into a single file with no external dependencies and serve it by Node.js like a static file.

Here is a good article about this: https://www.valentinog.com/blog/react-webpack-babel/