I have an app, made in create-react-app boilerplate, that i compile and build using npm run build.
I would like to take the folder /build and create an npm package out of it and publish it so i can use this package in other project as a micro app.
Is it possible? how to do it?
Tnx!!
You may check this this article if you want to make it simple. However, if you want to publish a component or component library than the recommended way is using nwb.
Related
I'm researching options for a new project at work. We're thinking of using nuxt (or just regular vue 3) and creating a library where we will be keeping our shared components.
I'm trying to do the initial setup, but am having problems. I followed this tutorial to create the library and added typescript to it. I created a sample component with a counter and exported it.
The problem is that when I import the component from my library in a consuming project (whether it's the nuxt project or a vanilla vite vue project), the component looks like it's not reactive. Its internal counter is supposed to increase when it's clicked, but it's not updating. There are no errors or warning in the console.
Another issue is that its CSS is not being applied. It has some basic styling defined in the component, but it's not visible. I've created a minimal reproduction repo with setup instructions here: https://github.com/drekembe/vite-reproduction-2342
I've tried searching for similar issues or debugging it myself, but I haven't gotten anywhere.
Any help is greatly appreciated.
I encounter this problem today with my package and finally, I found the real culprit is the node_module inside the package that we tested locally. If you install the local package by npm link or install directly with the folder path like "components": "../components", your node_module will look like:
node_modules
|
--components
|
--node_modules <-- the culprit here
Your package will be shipped with its own node_module and inside that module has a vue package that is independent of the vue package that you are using in your app. So your components would not work as expected.
To test it, just delete the node_modules/components/node_modules and the vite cache node_modules/.vite then run yarn dev again. You will see your component works fine now.
Solution:
In your package folder components run npm pack to pack your package. It will create a tarball for your package. The output is the components-0.0.0.tgz file inside the components folder. This is the most important part because npm pack will create a pack of your package that is similar to what you will publish to the npm registry.
Now in your test project my-vite-app add your package to the package.json: "components": "file:../components/components-0.0.0.tgz"
Run yarn to install the package and yarn dev to run the app and see if your components work.
Every time you make a change on your package, don't forget to pack the package again and re-install it. You might want to increase your package version to invalidate the yarn cache
In your components folder run :
yarn build
then run :
yarn link
in my-vite-app folder run :
yarn link "components"
in the maint.ts import the style :
import { createApp } from 'vue'
import App from './App.vue'
import 'components/dist/style.css'
createApp(App).mount('#app')
For a particular case in a Vue.js and JavaScript project a NPM package dependency have to be merge with the current JavaScript code base.
In that specific case, the NPM package should not be part of the nodes_modules folder anymore but rather be part of the JavaScript code itself.
In that case as both codebases will grow together in the future. (Independently from the original NPM package and not as a Fork)
How can I merge or fusion a NPM package to a Javascript project?
Additional Details:
The library that need to be merge is OIDC client. It's an open source project "Archived" by it's author (So no possibility to create Pull Request for a new release).
It is use to create a SSO for an internal project. This library has been retain by architect the for specific need of the project and there is no other option than this one.
There is no "internal package manager" available in this company
I don't want to host the fork on my personal Github and manage the package on NPM website
After many attempt to solve this problem, it turn out that Patch-Package do the best job to merge a dependency by simply patching over instead of forking.
Syntax is pretty simple and it integrate very well with NPM:
Installation: npm i patch-package
Modify the code of your dependency directly in node_modules folder
Run npx patch-package some-package where some-package is the name of your package to patch
https://github.com/ds300/patch-package
Documentation: https://github.com/ds300/patch-package
I have a git root project where I am using inside my root project a git subproject.
So for example I have the project MyApp and a subproject UIComponents.
Currently I have cloned the UIComponents repo into my project folder and added UIComponents to .gitignore of the root project.
Now I want to build a npm package for UIComponents and I want to be able to switch between npm production build and development.
The problem is in development the import is this:
import Button from './UIComponents'
and with the npm package the import is this:
import Button from '#my_name/UIComponents'
I dont want to adjust the imports everytime.
The first thought that comes to mind is to develop the UIComponents inside node_modules folder but this seems not to be a nice solution.
For solving this, try to use npm link.
So instead of cloning it in a subdirectory that need to be added to gitignore, just check out the repository outside of you project and then link it.
Example:
cd ~/projects/UIComponents
npm link
cd ~/projects/MyApp
npm link #my_name/UIComponents
In this way you can use the same import syntax but you can develop locally in both projects at the same time without the need of publishing every change.
I have cloned the Angular2 quickstart repo and build a simple app. I want to publish it to the web now. It runs locally but it references files directly inside the node_modules directory.
Is there a standard build process I can run that will copy all needed files to the output directory? Or do I have to create this myself from scratch with a task runner or something?
This is my first time to answer a question so bear with me if I didnt do it correctly.
If "bundling all angular 2 ts/js and other dependencies (core.js, rxjs, zone.js) into one js and create a script tag on index.html to reference the bundled js" close to the standard build process you mentioned and you want, my answer is yes, you probably need to npm install some other tools to do it.
Since the angular 2 quickstart is using systemjs to do ES module loading, the tool you can use is called "systemjs builder" https://github.com/systemjs/builder which helps you to do bundling (based on systemjs.config.js) and yes, you can use a task tunner (grunt or gulp) with systemjs builder plugins (gulp-systemjs-builder or grunt-systemjs-builder) to create a task to "build".
You can use this https://github.com/AngularClass/angular2-webpack-starter
And using npm run build:dev or npm run build:prod
It will build a dist folder and that's all you need.
I am learning NativeScript. For example, I would like to include this Guid generator package in my NativeScript app. My question is, how? I look at the directory structure generated by the command-line tool and I see the following relevant pieces:
node_modules
app
tns_modules
package.json
package.json
Do I add node-uuid to the ./package.json or the ./app/package.json? How do I reference it in my app then? For example, if I want to use uuid from the app.js file, what does that look like? I'm a little confused because of the package structure of NativeScript and how things actually get loaded at runtime.
Thanks
Run npm install from the root of your {N} app.
npm install --save node-uuid
The dependency will be added to the outer package.json.
And then in your app.js file, just use it like usual.
var uuid = require('node-uuid');
When you run tns run <platform> or tns build <platform>, the modules inside node_modules/ will be copied to folder under platforms/, take Android for example, it will be at platforms/android/assets/app/tns_modules/node-uuid. The building process is completed under platforms/ directory.