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.
Related
Integrating a server (say in Python or Java) with CRA can be done in two ways: "CRA first" or "Other server first"
By CRA-first I mean that the main serving component is the React server, hence serve the React application with yarn start and call a server api configured in package.json's proxy setting. This is easy and clearly explained in Create React App documentation.
By "Other server first" I mean that you serve everything (HTML etc) with a web framework of your choice but that the served HTML also loads the React application. The documentation explains how to deploy in such situation (basically yarn build the app and normally load the generated JavaScript file(s) from your HTML) but not how to do this in development.
So, how can I serve with an arbitrary server my possibly dynamic HTML and in such HTML reference the deployment JavaScript that CRA keeps updated?
It is explained in the documentation in the section Static Server https://facebook.github.io/create-react-app/docs/deployment#static-server
You just build yarn build and serve it using serve -s build 4000. Or you can use Apache/Nginx or whatever you want instead of serve. But you need to rebuild your application every time you make changes and restart the server. This way you won't get hot reload etc. You need Webpack server (CRA integrates it in the background) for that.
I created an Angular 7 app and built it using Angular universal to make it SEO friendly. However, as I was reading, it is not possible to deploy it now on a shared server (once build with Angular universal, otherwise it is possible), since it requires Node.JS to run the script file on server.
My problem is that my hosting plan is on a shared server so I will not be able to run it using Node.JS but I still care of having my app SEO friendly.
What can be a good solution?
Angular Universal renders your application in server side before serving the page (SSR). Indeed you will need nodejs to make it work.
You need to prerender your application as static files.
With #ng-toolkit/universal installed you should be able to prerender your application with the command :
npm run build:prerender
Now, you should see new folder dist/static , inside which all your application views should be prerendered and can be served as static files.
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.
I'm learning Angular 2 - I just finished the official Tour Of Heroes tutorial (https://angular.io/docs/ts/latest/tutorial/) and built my own website with weather just for training.
The whole application from the tutorial was built using NodeJS, which, as I understand it, is used to run javascript files.
But, what if I want to upload my website to a server (one of the free hostings) to see how it looks like on my other devices (mobile, tablet, etc.)?
Without angular, I wouldn't have problems with that - I'd just use FTP client to upload my .html, .css and .js files to the hosting.
But how should I do it with angular2 application? In my project's directory there are folders like: node_modules, typings - they contain a lot of files, and I'm not sure if they are needed. I know that browsers do not support TypeScript (which I'm using), so I should only upload .js files, but how exactly should it be? Which files should I upload?
I tried uploading everything but node_modules and typings folders, but I just got "Loading..." when I tried accessing the website.
I saw this: Hosting Angular 2 app
and there people just said to upload every js file, which I did.
Here's the link to my website: http://myweatherapp.comxa.com
//EDIT
All the above can be represented by this one question: What are the steps to transform local angular2-quick-start-app into a website, which can be uploaded to any web-hosting?
Take a look at Angular-Cli.
They make it so easy to build/bundle Angular 2 apps. They include a ng build and ng build:prod commands to build the angular 2 project into a distribution folder, standalone web app, so you can put it in a tomcat instance or anywhere and not just in a NodeJS environment.
Angular-Cli provides everything one could want when building an Angular 2 app.
Take a look at their Table of Contents. The Build section is probably what you are more interested in
I use Angular-Cli and I absolutely love it.
I am trying to push a project I created using the Yeoman's angular generator template to a server.
This is my project -
This is in my app folder -
This is the node-modules folder. For some reason, Yeoman has installed several node-modules. I am not using all of these.
The list goes on. This is just a small snippet of what's in the node-modules folder.
In order to push to the server, I am using grunt build. This generates a dist folder with the following content -
.
However when I navigate to my views, (e.g. reset-password), I get an error that this file is not available.
I am guessing this is because the dist folder doesn't have the views folder that the app folder does.
My final requirement is I want to push this project to the server, so that it is accessible to anyone. I don't want to push all the node-modules because I am not using them.
UPDATE -
This is the content in dist/scripts/ -
In the script.2a4ac124.js file, all my views are referenced but when I try to navigate to - file:///Users/proj/Documents/sso/dist/reset-password I get a file not found error, but when I navigate to file:///Users/proj/Documents/sso/dist/index.html#/ I see the index page.
installing node modules is normal - it installs development dependencies, which will be used in the grunt tasks that Yeoman creates. The reason there are so many is because the dev dependencies have their own dependencies that need to be resolved.
reset-password navigation error is most likely some build error, though it is difficult to tell just from the description. Yeoman converts the view files into angularJS templateCache and puts them into the concat/uglified js file (usually the app-.js file). First see if they are there. If they aren't, the view files aren't getting build. If they are there, it could be that the templates are incorrectly cached, or it could also be something else totally.
To deploy your application, simply copy the contents of dist folder to wherever you are deploying. You don't need the node_modules, since they are only used for performing dev. tasks.
Also,
Your screenshots show a SignUpCtrl.js file at the app root. Yeoman scaffoldings, whichever one you are using, usually aren't designed to have script files at the app root. Try putting it back inside the scripts file first.