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
Related
I am developing an express based web application and I started following the application skeleton built by express-generator.
Next, I added to my project webpack to bundle the client side assets.
Now I am not sure where to place the front-end javascript files, if in a /src or /app folder?
In truth, I am in a dilemma between, app.js, /lib, /src and /app folders.
According to express-generator, it creates an app.js file as the main entry and thus it looks a little bit strange to have an app folder with same name of the entry point app.js.
webpack usage manual suggests a /src folder to place javascript files. But I think /src should not be exclusively for front-end javascripts and on the other hand, I would not like to mix both server and front-end javascript files in same folder.
Moreover, the Accepted Answer to the question Folder structure for a Node.js project, contradicts the previous point because it states:
/src contains all your server-side specific CoffeeScript files
So, I think that maybe /src is not the better option to place front-end javscript files and according to the Accepted answer to the question Node.js project naming conventions for files & folders I would follow the proposed structure:
/app - front-end javascript files
/bin - helper scripts
/lib - back-end express files
But is it ok to have a folder /app and a file app.js with same name? Furthermore, /app is related with front-end and app.js with back-end.
I would suggest you to just rename your main file from app.js to index.js and keep the structure proposed in Node.js project naming conventions for files & folders:
/app - front-end javascript files
/bin - helper scripts
/lib - back-end express files
Thus, there is no more misleading between /app folder related to front-end and the index.js, which is the back-end entry point.
There isn't really a "required" structure for web apps, as Abdellah stated, it's usually best to just go with what you and your colleagues are comfortable with. However, because Node.js has a built in framework, you should probably use that. The move that makes the most sense to me is to rename the app.js file, and use the structure you stated.
I think public folder is rather common in web projects.
Since it's the destination of the generated bundle, i think you can name it more explicitly webApp or whatever you want. I think it's your call and there is no rigid/best practice here. Go with something you and your team are comfortable with.
I'm trying to use Angular2 with Springboot, but I can't set them together.
I first started a springboot project, and then tried to follow the Angular 2 Tour of Heroes by johnpapa and run npm install.
The structure looks like below:
I have the /app folder, and the .js are compiled to resources/static/app/js.
Problems:
1) The folder resources/static/node_modules/ has lots of files. So when running bootRun, it gets really slow and sometimes can't even refresh the files. I believe I shouldn't put the node_modules there, but not sure..
2) npm install puts the files in ./node_modules so currently I copied them to static folder. Should I just build the node_modules to static?
3) My structure looks hacky.. what is the best way to do it ?
How to set this structure? Also, please let me know if I should start using grunt/gulp or some other tool to make this easier.
Ps.: In case anyone is interested in the johnpapa's guide: johnpapa's angular2 guide
1) Remove node_modules from static folder. Your build process should bundle all the necessary modules. node_modules is used only during build.
2) Do not copy node_modules into static folder
3) Remove sources from static folder. That one is meant only for generated bundle + some static PROD files like index.html
Try really cool project builder Jhipster ;)
I shared on github a project that integrates Angular 2 with springboot. you can check here Angular 2 with spring boot
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.
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
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.