0

I've built a custom style "skin" on top of bootstrap that I intend to use in multiple UI projects.

Rather than copying/pasting the UI styles/components (built using sass and typescript in my current Angular 5 project), I want to build an NPM package that I can install these styles and components I've built in new projects, thus allowing updates to be done to the NPM package (maybe extending the controls within for example) without breaking the UI's using them or needing to update files within.

I've never setup an NPM project before. I've found a number of examples of how to build NPM packages, for example https://codeforgeek.com/2014/08/how-to-create-nodejs-npm-package/ but it seems to be for vanilla JS in this example. I need an example which:

  1. Builds on a dependency, in this case bootstrap
  2. Is to be used in Angular (I'm using version 5)
  3. Is installable and updatable via NPM or maybe Yarn

Has anyone any top tips on achieving the above? Or any really clear guides where someone has done this before?

I realise this question is relatively broad but really I just need some pointers to get started and I will document the process further when I have a better understanding.

Thanks in advance!

tk421
  • 5,775
  • 6
  • 23
  • 34
Rob
  • 6,819
  • 17
  • 71
  • 131

1 Answers1

2

So you should move your theme into a separate project. Then all you have to do is run npm init in that directory and you have a npm.

As for sharing it between projects, I would create a repo on Github for this theme npm. Push all of your changes there. Then you can reference it in the package.json of all your projects by linking to the Github repo. Here is a good Stack question about how to do that.

Finally, if you want to develop your theme locally inside one of your projects, you can use npm link. Here are he docs on that.

Max Baldwin
  • 3,404
  • 3
  • 26
  • 40
  • Great, npm init worked well for me! I was able to publish the same in the link above and then use it in a new js file. I just need to work out how to put a dependency of bootstrap in there and then use .ts files. Thanks! – Rob Apr 03 '18 at 14:55
  • 1
    @RobMcCabe here is Bootstrap as an npm. As for typescript. You're on your own there. My only advice is don't use typescript. lol! https://www.npmjs.com/package/bootstrap – Max Baldwin Apr 03 '18 at 15:03
  • Thanks @MaxBaldwin - I know how to reference bootstrap via npm ;-) I was just wondering how to tie it to my package as a dependency :-) maybe that's done automatically if I "install" it in my package folder, hmmmm (still working this stuff out! lol) – Rob Apr 03 '18 at 15:10
  • 1
    And just tested that - yes, in the folder that I've created my package, if I install bootstrap (npm install bootstrap), it automatically detects it as a dependency and will bring it down when I get the latest version of my package! :-) – Rob Apr 03 '18 at 15:14