I am new to Angular2. I have stated learning through resources in Internet.
I am using Angular-Cli tools for building my test application.
When I issue command ng serve --open I got my example project running on a default port 4200 and console shows,
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **
Now I am very confused with NG Live Development Server.
I have the following concerns,
Being a Client Side Framework why angular needs an development server.
Where Live Server is physically Located in running machine
The Live Server
can serve only Javascript or any other language.
What is the
complexity in integrating Angular2 application with Server side
frameworks like Spring-MVC.
Could anyone please provide your thoughts on this? Please correct me if I have understood the concepts wrongly.
Tl;Dr the cli live server is only for local development. Not for production or any environment other than local dev.
To answer your specific questions:
Being a Client Side Framework why angular needs an development server.
Angular is an SPA framework. The compiled application code needs to be loaded into the browser from a web server.
Where Live Server is physically Located in running machine
The server is part of Webpack, which is a dependency of Angular-CLI. So it is in your node_modules folder.
The Live Server can serve only Javascript or any other language.
The development server is only for running your Angular code on your local development machine. If you have a API backend, you should look at proxying requests through the dev server to your dev API.
What is the complexity in integrating Angular2 application with Server side frameworks like Spring-MVC.
This is trivial. You will not host your Angular application in production on the live dev server. Instead you will run ng build --prod --aot to build the production bundles into the project dist folder. These are the build artefacts that will be deployed to your frontend webserver. Configure the frontend to run at the root contest i.e. www.foo.com/ and the the Spring API to run at the /api context www.foo.com/api/.
You may want to take a look at this:
Node live server
This clearly explains what exactly is a live server and also how it works:
Quoted from the link:
The server is a simple node app that serves the working directory and
its subdirectories. It also watches the files for changes and when
that happens, it sends a message through a web socket connection to
the browser instructing it to reload. In order for the client side to
support this, the server injects a small piece of JavaScript code to
each requested html file. This script establishes the web socket
connection and listens to the reload requests. CSS files can be
refreshed without a full page reload by finding the referenced
stylesheets from the DOM and tricking the browser to fetch and parse
them again.
If you go through the entire post, you would get the answer to almost all your questions.
Related
I have an application built with Create React App that I want to use Node.js as a backend to load data from a database. Basically, I want Node to load the data and then use Create React App to do stuff with it. To do so I used this tutorial: https://www.freecodecamp.org/news/how-to-make-create-react-app-work-with-a-node-backend-api-7c5c48acb1b0/. I have set up a working development environment where I have all the Create React App in a client folder, a server.js that loads the data (from MS SQL Server if that's relevant), and a proxy set in client/package.json (CRA's package.json) for the port that the node app is running on (5000 in my case). I then run yarn dev and these two servers run together and talk to each other and everything works great.
The issue is deploying. My organization uses IIS. From what I can gather Node and IIS are not the ideal combination but IIS is what we use for everything. I would like the server.js and the CRA to be in the same folder and to basically function like one app as much as possible (I know that Node will need to run its own server). I would also like a setup that can be easily changed or moved to another machine. What I've done thus far is:
Set up a single application with a client folder, which is the build for CRA, and then server.js in the root
In my react code, made API calls to http://localhost:5000 (in the development environment I could do fetch('api/somestuff') but to make it work in production I needed to do fetch('http://localhost:5000/api/somestuff') )
Installed pm2 and used it to run server.js and start the Node server
This worked, however I'm wondering whether this is the optimal way to do things. This worked on my local machine but I don't know what will happen when I put it on our production machines. Will the Node server block other applications? Will it stay running no matter what or might it crash? Ultimately this is going to be deployed in a multi-server environment where we have 2 load-balanced servers with identical code that are put through an F5 to form a single URL--will this impact anything?
I'm pretty new to programming so bear with me, I'm sorry if this question was confusingly phrased.
I suggest you install ARR to work with IIS as a reverse proxy, which can forward the HTTP request to the backend NodeJS server.
Besides, for cross-domain request forwarding in the rewrite action type, we need to install Application Request Routing, and enable the proxy functionality.
Here are two examples of applying this feature, please check it.
How to successfully run node server with IIS?
ASP.net URL Rewrite subdirectory to external URL
Feel free to let me know if there is anything I can help with.
I'm building a small project using Angular 7. When you run
ng serve
and a NodeJS server is spun up to handle requests, does each request block until processing is complete? We are trying to evaluate how effective using this in production would be as opposed to using a more traditional application server.
Run build --prod to generate a "./dist" folder.
Then you have to put that on a web server.
You can use Angular Server Side Rendering (SSR) to run it on a node.js server.
You should not use ng serve for production because it use webpack-dev-server that is build for development only.
Github link
ng serve runs a webpack development server behind the hood.
a development server.
It's made to mimic the production build and see your final application in an esay way.
If you didn't have that command, you would need to run a command like simplehttpserver after rebuilding all of your application on every change.
This is a convenience tool provided by the CLI to ease your development, in no case it's suited for production mode. This is a server without security, without optimization, without performance, without ... Well, without anything that makes a server, a server. By default, it deosn't even make your application accessible outside of your localhost. Not so useful for a production mode ...
So, never, I repeat, never, use this command for your production server.
Run ng build --prod
It will generate minification code in "dist" folder. you have to upload the file content of this "dist" folder. It will give faster response for loading web pages.
For more details please refer Angular deployment guide
When using ng serve, you are spawning a backend nodejs environment with a web server to handle requests towards your angular application. That's great for reloading and quick startup when developing. But needing such resources for static pages is unnecessary.
At the end of the day Angular is just a framework telling you its opinion on how to build an SPA. No matter the framework or library you use, you will always end up with an index.xxx, Javascript files and other resource files from vendors or internally. Only these matters to the browser loading the webpage.
Hence, you need to build your app to generate the static files that will be served (i.e. ng build --prod). Then you have 2 good options:
Choose a web server that will serve the files (i.e. nginx) on a dedicated server (or even container).
Place the files behind a CDN provider. Since they are static, they will be cached and served to a browser requesting them based on its location.
I would opt for #2 as opposed to #1 forcing you to keep running resources (CPU, RAM, HDD) for files that will be requested not that often. I say not often because your SPA will be handling all routes within itself in the client's browser (and minimum once a day will request a cache refresh).
I've been working on building a video conferencing application by following this tutorial.
It's a great tutorial, and everything worked awesome when developing. However, when pushing to production I had issues and I'm not well-versed enough with these tools to figure out what's wrong.
I changed my NODE_ENV=PROD in my .env file. Which should trigger the production express build located here. (tutorial github link)
Next, I ran npm run build as I wanted to build my bundle.js, etc in the dist/ directory. I copied the three files from dist/,
bundle.js
common.js
index.html
Into my web server's directory, but now when visiting /token route, I get a 404. This doesn't happen on DEV, so it has to be something with the way the express server.js is written.
Unfortunately, I'm having trouble deducing what the issue is.
Environment details - I'm using a hostgator account, and copying files into the cpanel file manager. I've hosted lot's of JS applications like this before, but usually if I'm using a back-end it's a django server, so this (express) is new for me.
It is because express server is not running in your production environment. As express is used to build web server listening on specific port. In your case you have deployed the static files but the server is not running.
I have started getting into angular2 recently and have previously used angularjs. This might seem like a very broad question but all of the tutorials show how to use angular2 on a local environment and show how to serve the app and navigate to localhost:3000 etc. So my question is how do I go about running my app on my hosted server. Like how do I get it to go to my app using www.mysite.com? Do I copy the files to my public_html directory or do I have do do something to make my domain go to the port the app is being served on? Or do I have to turn off apache and do something to use node instead? Any help would be apreciated.
is very simple:
Copy local files into remote folder
Execute ng build --prod
your domain root route should be myremoteFolder/dist
hope this help you
Angular is a frontend framework, which means it runs entirely in the browser. This means it's files are "static", they don't require a web server to dynamically process the way PHP files would. This means they can be hosted anywhere static files can be hosted such as AWS S3 or whatever directory you'd put your images and stylesheets on HostGator.
I'm assuming the localhost:3000 is a simple development server used for local testing. If it does more work than that, such as expose API endpoints that your Angular app calls to, then you'll need to find a host that can run NodeJS applications.
I want to create a Node.js server in chrome app so that I would be able to run node.js applications through it. The app would run offine therefore the server had to be local.
As I was not able to do my setup in Chrome app, I used node-webkit for making my project to work and setup my project as
General Information
Express Server is started on port no 3000.
EJS is used for HTML renderer for ExpressJS
PeerJS Server is started on port no 9000.
IndexedDB is used for database purposes.
PouchDB is used as wrapper for IndexedDB
blueimp-file-upload is used for FTP over express server.
AngularJS is used for creating modules for front-end.
LUMX is used as UI framework.
jQuery is used for DOM Manipulation.
Velocity is used for smoother animations.
Complete code can be found at my github pulic repo
https://github.com/sumitkumar1209/PQ-PinQuip-Messenger