I've created a web app template that I use frequently for many different projects.
I would like to create an NPM package for it so that it's easier to install for new projects, separate the template from the project files, separate the template dependencies from the project dependencies, and allow easier updating of the template across all projects.
The issue I have is that I need some files/folders to be installed in the root directory (i.e. where package.json is saved). Most can go in the node_modules folder however I have some files that must be placed in the root directory.
For example, the template uses Next.js with a custom _app.js file. This must be in the root directory in a folder named pages. I also have various config files that must be in the root directory.
Can this be done with NPM, or does everything need to be installed in the node_modules folder? I'm having trouble finding anything on SO or Google that answers this, so if you happen to know a guide online on how to do this or can outline things I should search for it would be much appreciated.
With pure npm, everything has to go to the node_modules folder, so you can't solve your issue this way.
Maybe going with a templating tool such as grunt init or yeoman could be a solution here, although – unfortunately – you'll then lose some of the benefits of being able to install a package via npm.
Another option might be to use GitHub template repositories, which have just been introduced recently.
Last but not least one option might also be to just have the files' contents in the npm package, but create the pages/_app.js manually, but inside of it simply require the file contents from an npm module, and that's it. This at least helps to have the content portable, but of course it still asks you to setup the file and folder structure on your own.
Sorry that I don't have a better answer, but I hope it helps anyway.
PS: One "solution" might also be to use the postinstall step in an npm module's package.json file to create folder structure, copy files to where they should be and so on, but at least to me this feels more like a clumsy workaround than like a real solution.
Related
I have a monorepo setup with some private packages and a couple of public packages that can be published. I have a few common files that are directly in the root folder. When I run npm pack I want to be able to pack a few common files from the root folder. Is there a way to do it? Creating symlinks didn't work. Providing '../../file' in files attribute of the package.json didn't work either (perhaps understandably as there is no way to specify the target location).
Note that I currently don't have lerna which seem to have special logic to temporarily copy the LICENSE.md file from root folder to the packages.
Looking for options other than manually creating a copy of the file in each package that can be published.
I managed to accomplish this using prepack and postpack scripts
Is it necessary to have all files while re-designing website?
Like, I've designed a site with Nuxt JS, published it, now if in future I want to make some changes, do I need all files back that I started with? Like all node modules, pages folder, components folder, everything? Asking because there are tons of files in total.
A recent case happened with me is, I wanted to do some changes in my recent Nuxt JS site, but I missed "pages" folder, however I have "dist" folder. Is there any way I can like recover "pages" folder from my final production site?
Also, what will be best practice to manage Nuxt JS projects? Any tips, tricks will be appreciated.
To develop on a NuxtJS site, you need the directories and files listed in the Nuxt guide's Directory Structure section. The files you don't need for future development are the files in the default .gitignore that create-nuxt-app generates for you, including the dist directory and the node_modules directory.
The dist directory can be regenerated from your source code using npm run generate and node_modules from running npm install if you have package.json or package-lock.json file. Anything that can be generated from some other file(s), you don't need to keep.
Is there any way I can like recover "pages" folder from my final production site?
Unfortunately not.
What will be best practice to manage NuxtJS projects?
Not sure what you mean with "manage", but if you don't use git yet, then git.
I am using VS 2019 for Core 3.1 development and I installed Font Awesome whith Yarn:
yarn add #fortawesome/fontawesome-free
However, whenI try to reference it in my HEAD section like this:
<script defer src="~/lib/#fortawesome/fontawesome-free/js/all.js"></script>
I get the following error:
the 'fortawesome' doesnt exist in actual context
Package managers like yarn, npm, etc. just add the packages to your project. They generally aren't ready to deploy directly at that point, but rather require a build pipeline to create the actual JS/CSS resources. The #fortawesome/fontawesome repo is an exception in that 1) it's not actually a package and 2) the files are already "built". Even then, though, they still won't be in the right location.
I'm not overly familiar with yarn, but npm, for example, puts everything in a node_modules directory. That directory is not served by default, and should not be served, because it contains "raw" stuff. You'd need a separate build pipeline (using npm scripts, webpack, gulp, etc.) to build/copy assets into a directory that is served (i.e. wwwroot). That is likely the piece you are missing.
For this, since there's no build actually required, you just need to have the assets copied to something like wwwroot/lib and then you'll be able to reference it via the script tag on the page. That can be done with any tool like npm, webpack, gulp, grunt, etc. so you'll just have to research and pick the one that fits your needs best.
So I was reading this.
And I'm a bit confuse how it's works, as I understood it:
If I only have .gitignore in my repo npm will use .gitignore but If I have both .gitignore and .npmignore npm will only read .npmignore, right? Or it will read both?
Need to know, if it's only reading .npmignore I have to copy-paste stuff from .gitignore as well.
Or it will read both
As mentioned here, it will read only the .npmignore
If you want to include something that is excluded by your .gitignore file, you can create an empty .npmignore file to override it.
Although, Jeff Dickey advocates for: "For the love of god, don’t use .npmignore"
However, what you probably don’t know is that my little action of adding the npmignore file actually causes npm to now consult that file instead of the gitignore files.
This is a major issue—I’ve now leaked all my AWS credentials out to the public just by adding this .npmignore to hide my test directory.
What’s worse is I probably have no idea this happened. npm publish doesn’t show the files that were packed (it actually does with npm 6).
I don’t see the files on the npm registry.
The only real way to see the files is by adding the package to a project and manually looking inside node_modules.
I might do that someday out of curiosity and discover my AWS credentials have been sitting out in the open for months.
Solution/safer alternative:
npm supports whitelisting though, just add a files attribute to package.json with everything you intend to add to the project.
Now only the files that are specified in files will be included in the project and your dotfiles will be ignored.
In my app, I have these dependencies:
TypeORM
typeorm-linq-repository AS A LOCAL INSTALL ("typeorm-linq-repository": "file:../../../IRCraziestTaxi/typeorm-linq-repository"), who has a dev dependency AND a peer dependency of TypeORM
The reason I use a "file:" installation of typeorm-linq-repository is that I am the developer and test changes in this app prior to pushing releases to npm.
I was previously using node ~6.10 (npm ~4), so when I used the "file:" installation, it just copied the published files over, which is what I want.
However, after upgrading to node 8.11.3 (npm 5.6.0), it now links the folder rather than copying the published files.
Note, if it matters, that my environment is Windows.
The problem is this: since both my app and the linked typeorm-linq-repository have TypeORM in their own node_modules folders, TypeORM is being treated as a separate "instance" of the module in each app.
Therefore, after creating a connection in the main app, when the code that accesses the connection in typeorm-linq-repository is reached, it throws an error of Connection "default" was not found..
I have searched tirelessly for a solution to this. I have tried --preserve-symlinks, but that does not work.
The only way for me to make this work right now is to manually create the folder in my app's node_modules and copy applicable files over, which is a huge pain.
How can I either tell npm to NOT symlink the "file:" installation or get it to use the same instance of the TypeORM module?
I made it work pretty easily, although I feel like it's kind of a band-aid. I will post the answer here to help anybody else who may be having this issue, but if anybody has a more proper solution, feel free to answer and I will accept.
The trick was to link my app's installation of TypeORM to the TypeORM folder in my other linked dependency's node_modules folder.
...,
"typeorm": "file:../../../IRCraziestTaxi/typeorm-linq-repository/node_modules/typeorm",
"typeorm-linq-repository": "file:../../../IRCraziestTaxi/typeorm-linq-repository",
...