Develop Reference

How to prevent creating a nested output directory in vite.js

For my vite app, I'm looking to have multiple entry points. In this case, I moved my index.html into src/main. After building, I noticed that there are nested directories in my dist folder which is not what I wanted.
I've been reading the rollup docs to find the correct option to prevent this but no luck. Any ideas?

I had the same problem as you and after hours of searching this is how I solved it:
Create js file (build.js - or whatever name you want)
In this build.js file with some help from nodejs file system module(fs) you can modify structure of dist folder as you want.
Finally, modify package.json file to run build.js file after vite build command, for example: "build": "vue-tsc --noEmit && vite build --mode=production && node PATH_TO_YOUR_BUILD_JS_FILE"

How to use NPM in conjunction with PHP/STATIC web site directory strucure?

I have php web site with a structure like
/
css/
js/
index.php
if I do, for example,
npm init
npm install bootstrap#4.6
it will create additionally
/
node_modules/
bootstrap/
dist/
css/
js/
...
What next? Should I cahnge all paths within php-s to this strange long path node_modules/boostrap/dist/js or there is a way to copy required files to topmost directories js/ and css/

Normally you wouldn't use node_modules directly. Instead, you'd have a build step with a bundler like Webpack, Rollup, Vite, Parcel, etc. that knows how to bundle your site's assets with assets in node_modules into an optimized set of files for delivery. One reason for that is "tree shaking" — bundling up and include only the parts of the modules you have in node_modules that you actually use in the code. The other is that node_modules has a lot of files in it (READMEs, etc.) that there's just no reason to include on your site (provided you're giving all necessary attribution somewhere).
You could cherry-pick the files you need from node_modules (at least in some cases), but it's labor-intensive. You'd be better off finding deployment-ready versions of the modules you want. Another option is to use unpkg.com which provides a CDN for npm modules.

copy package.json while building js library with parcel js

I am creating a typescript library, and when I am bundling it with parcel.js, the package.json file is not getting copied into the dist folder. Can any one let me know how can it be done?

You could accomplish this by using the copyfiles package and modifying your build script to copy the package.json file to the dist folder after parcel runs. (e.g. parcel build && copyfiles package.json dist).
However, the reason why parcel doesn't support this out of the box is that you probably don't want to do this. When you're making and publishing an npm library, there are a number of fields in your package.json that have special meaning - especially "main", but also "types" and "module". When you publish your library, you want to make sure that these fields point to the right thing.
When you run parcel build, parcel looks at these these fields in your package.json to decide where to put the output files.
So if you then copied your unmodified package.json file to the dist folder and tried to publish the dist folder as if it were your package, things would be broken for your users - the package.json's main field would point to dist/outputbundle.js, but the actual file would be at /bundleoutput.js.
If you want publish only a subset of the files in your project, the typical way to do this is to use the package.json files field to "whitelist" which folders get included when you run npm publish, without modifying the package structure (see docs).

How to publish js + assets files to npm

I've developed a small Ui component for internal use in a company and published it to npm but when I install that package I only get an index.js file in node_modules folder.
I'm not using any package builder, es-modules, just a straightforward .js and .css
The folder i want to publish as the package has the following structure:
package
- src
- index.js
- index.css
- assets/
- fonts/
- ..some fonts
- images/
- icon.svg
- package.json
``

Use npm publish --dry-run to see what npm thinks it should be publishing. (Another possibility is to use npm pack and then examine the contents of the resulting tarball.)
If you have files missing, check the contents of any relevant .npmignore file or a .gitignore file, either of which might cause npm to ignore a file. (Read the relevant npm docs if you are not familiar with how that all works.)
Lastly, check your package.json to see if there is a files: entry, "which is an array of file or directory names that should be included in your package" (according to the docs previously linked). If you have a files: entry, add the files you want published that aren't being included.

Right Way of creating a front end dev build system

Not sure if this is the right place to ask this, so please bear with me.
I'm quite new to build systems/ front end workflow and have relied heavily on IDE built in systems to do the work for me such as compiling Sass to css.
I recently discovered the world of npm gulp and now need to get a project working and compiled from a "dev" folder to a "build" folder.
What im not understanding is if a install bootstrap via npm it adds
in to the node_modules folder outside of these two folders. Am I
doing something wrong here? because I cd into the dev folder but yet
it installed it in the root folder.
how do I change my tag rev files from my dev to build if I
have to get files from the node_modules
The same goes for Angular, it is installed in the node_modules folder. how do I go about accessing the code from there to my dev folder and then compiling it to my build.

This works with the way node resolve modules. If you install a module like gulp, you will have a structure similar to this:
- node_modules/
- gulp/
...
- src/
index.js
gulpfile.js
In order to import gulp into your script, you can just use require('gulp') (or import gulp from 'gulp' if you are using EcmaScript6) and node will find out where to look for this module.
You can do it both from the gulpfile.js or from src/index.js. Node will try to find the node_modules folder in the script folder, or in any parent folder.

For most front-end build systems, your node_modules folder actually sits at the root of your project folder. Your dev folder (i.e. where you put your source code) which is a sub-folder of your project root, will then be able to see npm modules installed into the project root folder.
Note that in many front-end setups I've seen, the convention is to call that dev folder src instead.

I would set it up this way, use the app folder for development purposes, while the dist (as in "distribution") folder is used to contain optimized files for the production site.
Since app is used for development purposes, all your code will be placed in app and will compile in the dist folder when you run something like gulp build
|- app/
|- css/
|- fonts/
|- images/
|- index.html
|- js/
|- scss/
|- dist/
|- gulpfile.js
|- node_modules/
|- package.json