How to copy "node_modules" using by "webpack-node-externals" to directory with production building?

Question

Consider the full-stack application project with NodeJS back-end.

• package.json includes dependencies for both front-end (like vue, vuex, etc.) and back-end (like body-parser, express, etc.).
• The entry point for frontend (EntryPoint-FrontEnd.js) and entry point for backend (EntryPoint-BackEnd.js) are being built by different Webpack config; the main differences is usage of webpack-node-externals and target: "node" for back-end.
• The dependencies for frontend are being bundled to EntryPoint-FrontEnd.js, but EntryPoint-BackEnd.js access to dependencies with webpack-node-externals.

Now: how to copy to 02-ProductionBuild only those dependencies, which using EntryPoint-BackEnd.js via webpack-node-externals?

I glad if can reach it by webpack-node-externals, but if impossible, other tools are welcome.

The basic practice is deploying the full project to host and installing dependencies by npm install. However all that we need for working application in server is 02-ProductionBuild folder including dependencies for EntryPoint-BackEnd.js.

Answer 1

Root of problems

• You have one repository to several applications
• You have centralized frontend and backend dependecies in one file: package.json

Workaround

• Create a npm module capable of create a package.json for each application in your repository. Fictional name: packagify
• Add scripts in your package.json to perform separate builds

    {
      "build:frontend" : "packagify ....",
      "build:backend" : "packagify ...."
    }

• If you don't want the elegant way of create a new npm library, you can create a simple packagify.js file and invoke it from your scripts:

    {
      "build:frontend" : "packagify.js ....",
      "build:backend" : "packagify.js ...."
    }

Some Advices

• Don't merge several apps in one source code repository. Each app must have its own source code repository
• Split your current repository in two repositories: One for your frontend and one for your backend
• If each app has its source code repository, you will not have problems to build or deploy them. This is called: Independent deployment
• If your organization will grow, you could avoid a new monolithic using microfrontends

Monolothic Frontend

Since you are using vue, it is sure that your backend is a rest api. So you are close to the classic approach which is opposite to a monolithic application.

One monolithic characteristic:

• frontend and backend source code are in the same repository

But what happen if you put dozens of web features in the same web application? A new monster is born:

Microfrontend & Microservices

As a extremely summary, microfronted is the same as microservice but for frontends

As you should already know, microservices has a lot of advantages. These advantages also applies to microfrontends. One of most important is: Independent deployment

Independent deployment

Just as with microservices, independent deployability of micro frontends is key. This reduces the scope of any given deployment, which in turn reduces the associated risk.

In your case,

Check these links;

• https://micro-frontends.org/
• https://medium.com/@tomsoderlund/micro-frontends-a-microservice-approach-to-front-end-web-development-f325ebdadc16
• https://martinfowler.com/articles/micro-frontends.html