Hosting Angular 2 app

Question

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 a

Answer 1

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/

Answer 2

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.

Answer 3

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.

Answer 4

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

Answer 5

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.