How to deploy ng2 app after ng-build - javascript

I've never understood what comes after the ng build command. I mean, how can you actually load your built app on a normal server and access it? Until now I've found only topics talking about the ng serve and ng build, saying that after the ng build you're done. But that's not true.
If I try to build and then navigate to the folder, I get a lot of errors in the console about files not found etc... not to mention errors about unmatched routes and so on.
The fact is that the app before the build using ng serve works like a charm, but I can't go to the client and say:
"Well, you have to use ng serve".
Jokes apart, how do I actually serve my built app without using GitHub pages and other hosts, but using my own server?
I swear that I've searched a lot on this topic, but I've never found a "stable" solution for it.
Thanks for any possible tip. I'm freaking out with this thing.

Because of new <base href="/"> attribute in the html, app is looking for your assets in the respective root folder.
So try to remove and run so that it will work and load the base href in run time.
You can use the below code to get it working
import {APP_BASE_HREF} from '#angular/common';
{provide: APP_BASE_HREF, useValue : '/' }
or using javascript
document.write('<base href="' + document.location + '" />');

If you use Angular CLI: ng build
Navigate to your app folder /dist
If you want to run it on your PC with no hassle just download USB Webserver and just copy the files to the root folder and run the server, you can port it to your client via usb or on client PC.
To run the app on a server: copy everything from dist folder + all your assets ( bootstrap.css or image folder or fonts folder)
http://162.244.83.64/
===========================================
If you are trying to run the app from local PC keep in mind that the app is looking for your assets in the root folder (C:/, D:/).
Open your Index.html file and edit the to point to the correct path, you don't need to do this on a server or hosting.

Related

How to integrate Ionic 4 + AngularJS (1.7.2) + Webpack + Cordova?

Ionic 4 CLI is seems to be friendly only with Angular7. And Angular7 is slow like.. send for compile and go take a shower and back and maybe the bundle will be ready. Actually the worst framework the front end ever met.
AngularJS is probably the best happened to front end world. Everything is fast, reliable, straight forward. When you combine this with Webpack you can enjoy an high level of programming language including exports and imports and classes and and components just everything else you need.
However, the Ionic CLI doesn't integrated with something else than the Angular7.
So I have tried to create a cordova based project using:
cordova create test
And then tried to "manually" setting things up.
I have installed Webpack in the cordova based project so now it's accessiable through the node_modules folder. Then I have created the webpack.config.js file in the same directory.
Then I have created src directory which stores the webpack.entry.js file. The webpack.config file reads what the entry file created and creates a new folder called www and there it places index.html file and bundle.js.
Then I am trying to run cordova run --device with Android device connected and the app is getting actioned in the actual device.
Very nice.
However, I have some issues: it seems that the files that are in the bundle doesn't going to be work since angularjs is not completely served.
I mean, in order to serve an angularjs app you probably need a static server or serve it via node. In this case this doesn't happening so it just like drag the index.html file to the Chrome browser and have it not working at all.
I have searched tons at Google but found just nothing.
Is there any boilerplate working with Cordova + Webpack + AngularJs + Ionic framework's components, working fast with livereload?

How can I serve an Angular 5 app without using ng serve?

I can build and serve an Angular 5 project with ng serve and view it in my browser. I'd like to move the files onto a docker container because my final app needs to have a php backend.
When I move the same file system that runs with ng serve to a docker build and try to navigate to it, I receive a server error.
I know the container works properly because I can serve PHP files to the browser at the respective localhost port without any issues. So it needs to be something with Angular that is causing the error.
I've noticed that the ng new angular-tour-of-heroes project doesn't have an index.html in the root project directory. When I move the one in the src/ folder to the root, I still get nothing in the browser.
How can I serve an Angular app using Docker instead of ng serve?
This answer will be two parts since it sounds like you may not be familiar with the build process.
Building
This is more general to most JavaScript frameworks. There is usually a "build" process that will produce the static web application in some way that it can be served by a web server.
In the case of Angular, it is ng build. You can learn more about the command at https://github.com/angular/angular-cli/wiki/build. The ng build command would create a dist directory in your project where the built HTML, CSS< and JavaScript lives. The files in this directory are what you would push to your web server to serve.
Docker
Now that we understand how to get the source of the web application to serve, we want to run it as a container. Based on your question, I am assuming that you already have a Docker image with a web server. In this case, you could copy the dist folder to the same location as the existing Dockerfile that builds your web server and add a line to your Dockerfile such as:
COPY dist/* /my/webserver/root
If you can provide more information about your existing image, Dockerfile, and environment I could provide a better example of building and producing the Angular application to the final web server image.
Though, you don't necessarily need to serve the Angular application from your PHP application. If your Angular application is connecting to the PHP application they could still be separate Docker images and containers that are linked together.

Angular2: How to go from an "ng serve" hosting to a Node.Js hosting

I've made my first Angular2 application, while using ng servefor hosting. Now I've to add some backend(because I need some small server logic).
I've found this who basically explain me how to host an angular 2 app on nodeJs. But ng serve was doing a lot of things, checking the changes, bundling the differents JS/CSS files, injecting angular into my template, getting my dependencies.
I cannot just "generate" angular web site and then, since I've to update the angular part to get the data from the web api and work with it.
So what should I do to switch from ng serve to an nodeJS?
EDIT:
Viewing the answer, I must not have been clear enough.
My angular JS is not an application that will on client ONLY, I've done some part of it(navigation, some form, ...) but now I need to host a server with web service and websocket to continue the work. It's not about deploying this to a productive server. It's about to moving to an environnement that allow me to work on the server and the client side.
I think I finally understood your question:
Instead of using the devserver bundled with angular-cli (ng serve), you want to use your own Node.js-powered server.
Also, you DON'T WANT TO STATICALLY BUILD your app (ng build). You want to serve the live build (which has to be generated automatically by the server).
Here's how you can do it:
1) Watch, transpile, bundle...
Webpack is perfect for that.
Create a webpack config file with the right settings for an Angular app. Here's an example from angular2-webpack-starter: webpack.dev.js.
The example is bit verbose. Just keep in mind the config file is where you tell webpack how to handle .ts files, what bundle(s) it should generate, etc.
2) Serve the bundle(s) generated by webpack with a Node.js server
I see two options, depending on how much control you want:
2a. Use webpack-dev-server (not a lot of control)
webpack-dev-server --config config/webpack.dev.js --watch src/
You can see that the webpack-dev-server uses the config file previously mentioned.
Again, you can see an example of the full command to run in angular2-webpack-starter's package.json file.
2b. Create your own server (a lot of control)
You could create a Node.js/Express server using the webpack-dev-middleware, to which you would feed the config file created in step #1.
The middleware is the magic link that will let you serve the files emitted from webpack over the Express server.
Example of a Node.js/Express server which uses the webpack-dev-middleware: srcServer.js.
Does that answer your question?
I know this is an old question but I am just having this same concern and I found ngserve proxy option useful. In development you can run node on another port then calls to /api get redirected through to node.js.
https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md
package.json gets:
"start": "ng serve --proxy-config proxy.conf.json",
then make a proxy.conf.json file like this
{
"/api": {
"target": "http://localhost:3000",
"secure": false,
"pathRewrite": {
"^/api": ""
}
}
}
run ng build --prod to build your application.
After building the application, you will find your final dist code in dist directory.
Now, use this code in your server.js file in Node.js.
(function() {
const express = require("express");
const app = express();
app.use(express.static(__dirname + "/dist"));
app.listen(80);
console.log("port" + 80);
})();
I'm not sure if this is still relevant, but this might help others get a quick start:
Run your NodeJS server part e.g. like this
nodemon server.js
Open 2nd terminal (in VSCode Ctrl+Shift`) and start client part build & watch
ng build --watch
They will continue to work in parallel, each doing it's own job. This is not exactly the same as ng serve, e.g. this will not reflect your changes immediately inside the page, you still have to hit F5 (which you most probably did anyway before Angular). But this is fast, free and much easier than becoming web-pack guru. And you are still able to switch between terminals to check for any output / errors.
Angular app is a HTML 5 app. So you just need to serve it as a static file in NoeJs.
How
Build your app
ng build --prod
This command will create a folder named dist. The folder content is your HTML app.
Serving your app
Just serve it with your NodeJs app pointing to the index.html file.
ng serve is only for development. It is not intended as a production web server.
ng build --prod --aot --no-sourcemap will bundle your application ready for production and place it in your dist/ directory.
If you want to use Node.js you can use Express with the static file middleware. You will probably also want a RewriteRule middleware to support serverside HTML5 Pushstate.
In reality you don't need NodeJS to serve your built site as it will just be flat files. Nginx, Apache or IIS with rewrite rules to support HTML5 Pushstate will be enough.

Angular2 app not starting from index.html without node server

I have recently been building an Angular2 starter kit for my own use, using various bits and pieces found in tutorials and SO. I now have gulp tasks to bundle the app for production but it won't work without running it through a server, node in this case.
Here is the repo: https://github.com/LGLabGreg/lg-angular2
Basically running gulp dist will bundle the app fine in dist/ folder, but clicking the index.html in that folder doesn't work, the app is stuck on "Loading...". If I serve it with node it works.
Thanks.
That's because when you are serving it from node the baseUrl is set correct /, but when you just click on index.html the baseUrl is set to / which will probably be C:\ (file://). Resulting in the browser trying to obtain all resource from file://. Check your browser console for errors
Sooooo... that's a pickle

How to deploy a backbonejs app to a production server.

I wrote a small single page application in BackboneJS and not sure how to get it into production. I typically use grunt serve command and it runs everything and displays to localhost:9000.
How do I do this on a production server so I can access the app from www.example.com.
Backbone apps are all static files man, so you can put it in a CDN or just have apache/nginx serve them as static files.. Doesnt get any simpler than that really.
Get a server
Install nginx/apache
Configure nginx/apache to use your example.com and link it your /path/www/your-backbone-app
Copy over your dist/ directory to /path/www/your-backbone-app
i really suggest you minify the hell out of your html/css/js since you said your backbone app is all one "page". Make 1 js file with everything inside (look into require.js and "r.js").
Profit!
Your best choice is to do it all in your computer: require.js can do all of this automated! ->. join and minify all that apply, change the html code to reflect the new minified names of the css and js, zip. Finally run this from the console scp -r ~/yourapp/dist/ server:/path/www/your-backbone-app. Greatest thing of all this is you dont have to do anything else after that command. Enjoy.

Categories