Using the same javascript, css files in different capacitor projects

Capacitor
1

Dear community,
I’m having three different projects, each building a different APK, but using the same css and javascript files and the same HTML sippets inside the index.html. Thus these files exist three times which makes them difficult to maintain. Is there a way to put these files into a central location and include them from there in my index.html?

I consider to create a python script that copies these files from the central location to the web dirs. Should I go this way. Or are there alternatives?

I read about libraries. Would a library do this job?

I found this:

Would webpack do the job? Would it be possible to include custom javascript in this procedure?

Best regards, Ulrich

2

No ideas? I assumed that this is a common situation other developers encounter either?

3

Sounds like a monorepo situation.

4

Sounds like something Nx is designed to do. Have you looked into it?

Relevant links:

5

Thanks for these proposals. Nx seems to be quite powerful but I’m unsure if it’s easy to use. I think I’m gonna try to get started with it and switch to the self made procedure when it’s too complex for me.

Additional question:
I do not use Ionic or any other framework. In Capacitor I encounter the problem that it’s not possible to use an import statement in order to include the node modules. Worked around this but found no clean solution. Will Nx help me to resolve this issue?

6

For what it’s worth, I have a project with a shared codebase for multiple apps and I just use Git branches. Each branch has its own icon and splash assets, a CSS variables file, and a config file containing custom data sources. Git is pretty easy to use and well worth learning if you’re not already using it.

7

I did some first steps in NX by following this Tutorial:

and run into an issue:
The javascript being built reads:

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.isOdd = void 0;
var is_even_1 = require("is-even");
var isOdd = function (x) { return !(0, is_even_1.isEven)(x); };
exports.isOdd = isOdd;

When including this in a test file my browser Opera complains: exports not defined. Fixing this manually is easy by adding exports = {}; but how can this be done when building automatically?

8

@ebellempire Thanks for this advice either. I’m gonna consider using it. However currently I started with NX.

9

Any ideas how to fix the error mentioned above?