What is best practice for font-end NPM package file structure? - javascript

I am making an NPM package for the front-end and I want to know what the best file structure to use is. I have one code.js file and will have one code.min.js file. Should I have these two files in the root directory? In a dist folder? In a src folder? What is the best practice for this file structure - specifically on the front-end?

you should separate your source from your development compiled files, as much as possible.
For example on my projects, all minificated files, should be in a dist folder. The non minificated files, are not getting on the server. You wouldn't want a customer to accidentally use a non-min css and get 0.2 sec for extra load, would you? :)
Also, I do strongly recommend you to google this: "recommended structure [add framework name here]"

code.min.js is certainly the minified version of code.js. You simply need to add code.min.js to your project.
For node projects, you can insert directly the cdn link into your code or when you create a file ( js, css or image), it goes to the public folder.

Related

What is the difference between src, public, and build in folder structure?

I know what these files contain like build contains the minified file which is minified from src file. I need to know how browser works with it. I haven't uploaded my build file to hosting service yet my website got rendered. In the website, <script> SRC was linked to build but there was no build uploaded but a build was created automatically. this behaviour was observed in svelte. But I hope all framework does the same.
As far as I know, build tools like webpack, parcel, ...etc., use BUILD or DIST (Of course you can change it however you want) folder to store production ready build files of the project.
Files in PUBLIC are just copy & pasted to the build/dist folder when build process is finished. You can store index html, images, fonts, favicon or other static text files in there. They are not processed by build tools.
SRC folder is just for storing the whole project's unminified source code.
Most frameworks use 'build/dist - src - public' structure while frameworks like next.js uses root for storing project source code by default.
From the Vercel documentation found here https://vercel.com/docs/build-step "Vercel tries to automatically detect the frontend framework you’re using for your project and configure the project settings for you. If you’d like to override the settings or specify a different framework, you can do so from the Build & Development Settings section." So Vercel did automatically make a build folder for you. This is ok, because you should always use npm run build to create your build folder and point your hosting to use this folder for production.

Obfuscate/minify code in place for npm package publish

I have dist directory that looks like this
Requirements: The root and each folder has .js and .d.ts for typing. I want to ship this to npm after obfuscating/minifying (to avoid reverse engineering). I need this to happen in place (all the folder structure intact), and also preserve the .d.ts. I use this package internally to develop and 1. need the flexibility to look into each folder directory, and 2. use the defined types.
What I've tried: I've tried webpack but since webpack minifies the whole codebase to one file, and does not preserve the typings file, I don't think it's the right choice.
Question: Is there a way to achieve this? Ideally the directory itself would almost be unchanged, just the contents would be minified. Thanks!

Add 'scripts' folder to .gitignore in Aurelia project?

I am noticing that Aurelia is building to the scripts directory in my CLI project. Is it safe to add this directory to .gitignore, or is there some reason to track changes to 'scripts' in Git?
You can safely add scripts to the .gitignore file.
Aurelia CLI uses the scripts folder to store the generated scripts (vendor-bundle.js and app-bundle.js).
vendor-bundle.js is for libraries (e.g. aurelia-binding, bluebird and jquery).
app-bundle.js is for all your HTML, CSS and JS files from the src folder combined in one JS file.
Because these files are renewed every time you run au run or au bundle, there is no need for them to be in version control.
Depending on what functions the scripts have, you might want to leave them in the repo.
E.g.: you add a new member to your team, and said scripts might be required for your project to work. In which case, if they're not in the repo, he will bother one of you to transfer them to his computer.
Edit: If the scripts are automatically generated every time you build the project, or if they are downloaded via a packet-manager, then there is no need to leave them in the repository.
If this is the case, it's a safe bet you can add the folder to the .gitignore. If this is not the case, then it might be better to leave them in the repository.
This all depends on your project, where you are putting your scripts and how the frameworks work.

How to deploy on apache http server once you have your angular2 application bundled with gulp

I've been wasting a lot of time trying to learn how to deploy angular 2. I tried looking around how to do it on tomcat, because that's what I was ordered to do, but turns out tomcat isn't really used for this, is more java and jsp oriented, so I've read is better to use Apache HTTP server instead.
I just installed Apache server, and I just installed npm with gulp ( https://github.com/swirlycheetah/generator-angular2 ), and everything works fine: I can run my app on localhost:3030 with gulp but I now want to test it with Apache,
I've tried several things (since I haven't seen one single place explaining this, maybe it's a very basic thing to do?):
Configure apache .conf file to change the htdocs to a folder I've created. I've tested this works, I see the result on screen when I access localhost.
Compiled everything, got a folder called build with all my files changed to .js extention, so I figured, that must be it. I copied all the files in there, the lib folder created, and index.html and css files. Doesn't work.
Tried several combinations of picking some files that I figured would be necessary and not others. Doesn't work.
Copied the whole project that I've tested with gulp, with eclipse etc that works, including .ts and .d.ts files, which I've read shouldn't be there and are not necessary, and it works.
So I would like to know how is this really done, because I feel like I'm making no improvements. After reading post after post and blog after blog about I simply needed to transpile .ts files to .js, and simply put that javascript files on "some" folder the server uses, it would work. Not only it doesn't but when I use the original .ts files it does.
What might be going on and more important, how is this deployment (I guess it's called something else since I can't find much anything) properly done?
Make sure your .js file paths in your index.html page are correct. When you generate .js files in a folder(like build), your index.html may keep source paths for those .js files are like src="inline.js". So when you access index.html in build folder - localhost/build, it looks for those .js files in localhost only not localhost/build. Try to update source path of those .js files to /build/.
src="/build/inline.js".
you can do that using proxy option in Browser Sync..
proxy option link
I didn't try it but may be it will help you.

Visual Studio javaScript default directory with NuGet

I need some help with organizing js files in VS.
So my problem is, that VS(MVC) put all js files by default into the script directory, but i also have js created by me, in a sub directory, like this:
Now my problem is that when i open the scripts folder, the js files installed by NuGet take 2-3 screens in length, so i either have to open/close it every time, or scroll trought like there is no tomorrow.
So my question is, is there any good solutions to it? Like moving all the files into a subdirectory, and change every bundles, and NuGet config, or should i create a separate script directory for my custom js files? Any good ideas?
You can place and use as many subdirectories you wish for your own scripts.
With the help of Bundle.IncludeDirectory all your scripts will be added to the bundle without having to define multiple bundles.
Concerning nuget I don't think you can (re)place those scripts at a location of your choice.
See Stackoverflow: Include all files in a folder in a single bundle
Sadly you cannot change the default folder that NuGet downloads the files. Is the author of the NuGet package that decides where it will get installed.
An alternative is to use Bower. With it you can control where files get downloaded (look at this question).
Or, as you said, move your own javascripts to another folder and forget about the default.

Categories

Resources