So I've been using knockout.js to do the data-binding for a particular chrome extension I am working on. I've thought that it may make sense to move to a framework (like Angular). After using npm to install all of the dependencies for my angular, the node_module folder is over 100 MB. This is obviously too large to contain in the chrome extension, and have installed on each users machine. Any recommendations on how I should go about using Angular for my extension in such a way that it doesn't require hundreds of MB of files on the client's machines?
There is no need to include bower_components or node_modules folder in your Chrome Extension. Try using Grunt/Gulp for minification.
Your Repository should ideally contain a dist folder, which contains the production ready state of your extension. When you're uploading your extension to the Chrome Webstore, you should create a ZIP of this folder.
Use the below Grunt plugins for optimizing your application,
grunt-usemin - will extract all your stylesheets or scripts from index.html, and combine them into a single CSS or JS file, so you do not have to worry about the node_modules or bower_components folder.
grunt-contrib-uglify - will uglify/minify the JS file.
In short, treat your Chrome Extension as any real world production Angular application, which will normally contain a distribution folder containing the optimized version of your code. You will be deploying the contents in this folder to production, and not the entire repository.
You can refer a Chrome Extension, which I have worked on, named Browser Automation Tookit on Github. You can check Gruntfile.js and the dist folder for further guidance.
https://github.com/kensplanet/browser-automation-toolkit
When you use npm for client-side dependencies you should only include the dist files. (Angular for instance - /node_modules/angular/angular.js)
Usually those files only weight few kb.
It's better to use the package minified version in production if they expose such (/node_modules/angular/angular**.min**.js) or minify it by your self you can use any task runner for it (grunt/gulp)
Furthermore, I will highly recommend you not to reinvent the wheel and start with a yeoman genrator or a project seed like: https://github.com/yeoman/generator-chrome-extension
Related
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.
This is the first question i am asking, please excuse me if it is not clear.
i am also new to building an application, i am building angular js application using grunt.
my question is i have done build using grunt tasks like below. so now i have all minified css and java script files in my "build" folder. while deploying app("build") in server.
1) do i need to have all node modules in "build"
2) if yes how can i get into build
3) what exactly "build" or "dist" should contain?
grunt.registerTask('default', ['jshint','concat','ngAnnotate','uglify','htmlmin','copy','connect','watch']);
Grunt is a task runner which will make lots of your work very easy, like concatination, minification etc.
As a standard there will be three folder for this process
- build
- dist
- src
src: This folder will contain all your source files, this is where developers write code. Files in this folder will be organised for the easiness of development and to module structure.
We have to deploy our code to server which is concatenated, minified, annotated, etc. for better performance and various reasons specific to projects. Grunt task are used to convert the files in src folder to deployable code.
dist: This the folder where all the files which is the output of the grunt tasks resides. This is the folder which will go to the server.
build This folder will have all files which is used for grunt tasks resides. eg: grunt.js, package.json, node_modules, etc.
only dist folder will go to server. nothing else.
Node modules are just used by the development server and all the client side tooling etc. The build version will have something along the lines of scripts.js(your JavaScript files i.e the angular app) vendor.js(all the angular libraries) index.html and some css files.
I'm new to Angular 2, I know host Angular 1.x on shared hosting like GoDaddy, but I don't have idea how publish Angular 2 application, for example I have this structure folder:
angular2-quickstart
--app
app.component.ts
main.ts
--node_modules
--typings
index.html
package.json
styles.css
systemjs.config.js
tsconfig.json
typings.json
What file i need to upload on ftp?
I don't tried anything because I don't know how to proceed
Thanks in advance!
As a component based language, angular 2 includes some caveats in it's deployment process.
First, the files used in development environment aren't necessarily shipped to production. In short, you'll only need to upload .js, .html and .css files .
Second is that even if your application works deploying only the files mention above, it's advisable to include the following process:
Bundling: Compiling all the .js files into single files. For instance, vendor.js could include all third party libs and bundle.js would include all application .js files. (Bundles are import for performance reasons, but bear in mind that with the arrival of http 2, this process will be abandoned)
Minification: it's a standard process in all web apps, but now you only minify bundled files.
Take a look in this article, as it give some examples of tools that can help you with deployment process.
http://www.ninjaducks.in/hacking/angular-setup/
If you don't have a backend, free hosting sites will usually look for an index.html to begin their job. Hence, your folder structure is correct but you will need to upload the js files instead of the ts files.
I think that one popular workflow is to gulp-typescript your .ts files, and send the resulting .js files into a distribution folder. The many .js files could also be "gulp-concatenated" (gulp-concat) into one file.
Of course you'll need to be sending your html and css files as well.
Since the Angular2 library relies heavily on what's in the node_modules folder as well, you would need to upload your package.json and npm install on the server side. You could try uploading the node_modules but the upload takes a lot of time.
You need to build angular2 project using tools like webpack or angular-cli - which also uses webpack post beta.14 release. Webpack will create a distribution directory - dist - which you can deploy to the server. Webpack bundles all the code into a single file which it puts inside the dist folder. Here's a good resource to understand the code and deployment structure of angular2 app: https://github.com/mirkonasato/angular2-course-webpack-starter
Clone the above directory, run "npm install" to install all dependencies and run "npm run build" you will see the distribution folder - dist - which you can deploy.
Well, you can run ng build in your root application directory. It will create a dist directory containing the app and files. You can put this directory into the page the webserver will look for the index.html
Question 1 :
I am installing my project dependency libraries using npm and it gets stored in the npm_modules folder. Is it necessary to keep the copy of library like angular.js,angular-route.js in lib folder or vendor folder? I could see few people are using lib folder or vendor folders to store the library in the permanent manner. I am confused by seeing this.
Question 2:
Do I need to copy/paste the node_modules folder to production or just run the npm install command on the project folder's command prompt to install all the dependencies in production. How does a dependency library get promoted to production?
Thank you kindly for your advice.
It all depends on how you need to deploy your site to production, really. Ultimately, you will probably want to bundle all your JS files into one or a few files, which are minified and sent with gzip compression.
How you bundle them is up to you. There are quite a few options:
Browserify
Webpack
Grunt / gulp build process
And many more besides
As to whether you need to keep a copy of these bundled javascript files under version control, well I think that boils down to 1 key question: can you run a build process (such as one of the tools using NodeJS) on the production server, or on a build server that creates a zip file or installer? If so, then you don't need to include them, just get the build server or production server to check out the latest copy from version control, npm install and then run the build process.
But if the best you could do is have the production server check files out from source control, then you would want to include the final versions of the files to use in the repository.
Keeping generated files, such as your bundled javascript files, in your source control repo should be avoided where possible. Because otherwise, every commit has to contain the changes to the source files, and the corresponding change to the generated files as well. And the latter is just noise, and has to be ignored by every developer looking at a diff/patch for a commit.
From this link (http://docs.meteor.com/#structuringyourapp) the client/compatibility directory is the place to directly put client files that aren't smart packages in Meteor.
However, does Meteor still minify the files in this directory in production? i.e., should I put pre-minified or just non-minified libraries in that directory for my application?
This place (though unofficial) is better for Meteor-structure IMHO: https://github.com/oortcloud/unofficial-meteor-faq#where-should-i-put-my-files
I'm afraid I've never tried the compatibility folder in a deployed app so I really don't know.