moving application from nginx to nodejs - angularjs

I have a small web application(html,css,javascript,jquery and angularjs) which runs on nginx server.I've been asked to move it from nginx to nodejs server.What does this mean?And how can it be done?


Node.js is a javascript runtime engine you can install on your computer to execute javascript code outside of the browser.
Nginx is a webserver, and Exprpess is a simple library for creating a webserver with Node. Here's a quick starter on that.
So all you have to do is serve the dist generated from angualar with the node + expresss webserver instead of the Nginx one.
This should be helpful enough to get you started on creating the API.


Install Node, Npm.
using npm install http-server
npm install http-server -g
move to that directory where your all files (html,css,javascript,jquery and angularjs) present. Run the command
http-server -p 3000
It will run you application using node on http://localhost:3000


It means the person who asked you to do that has clearly no idea about both nginx and nodejs. They are compatible.
This will teach you how to make a simple HTTP server:
https://nodejs.org/api/http.html

Related

Do you need a web server to run a production build of a react app on a VPS?

I have built a react app using a truffle box that uses create-react app. I can get the app running on my local host but I can't see it on my VPS when I go to the IP address of my VPS and I run exactly the same commands and I get the same output in the terminal. I go in to my client dir and run npm start. I have tried to make a build and run the build through an http server in the client dir and the root folder of the VPS.
I run
serve -s build
All I can see is the index of the build in the browser when I try and serve the build through a webserver. When I run npm start on my localhost I can view my app but it doesn't work on my VPS. Please help me I've been struggling with this for days and its the last part of my project.

You need a webserver in any case.
When you do a local development, you do use webpack dev server (which is inside of create react app).
For the production, you need to make a production build and serve it for example by nginx. Here some details how to create production build with CRA https://create-react-app.dev/docs/production-build
On your screenshot, you don't see your site, because there is no entry point in your folder. By default it should be index.html

Getting development build of React to communicate with backend with NGINX

I have an application that uses React for frontend and Perl for the backend.
The previous developer created an NGINX config file that handles the communication between the built version of the React code and the backend with no issues.
However, since NGINX is configured to work with the built version, I have to do npm run build every time I want to see the changes I made on the frontend side and interact with the backend.
I was wondering if it is possible to configure the NGINX file so that I can just use npm start to see my changes. Can this issue be resolved by making modifications to the NGINX config file or is the NGINX config file irrelevant for the development build and I just need to modify the backend code to get it working with npm start?
I am unfamiliar with both Perl and NGINX services. So, I am not sure which part I need to focus on. Furthermore, I had some trouble communicating with the backend on development build (npm start) with no NGINX config file.

HTML file on localhost

As I am new to angularjs and I have made one small app using ui-router in angular and I want to run it on localhost.Can someone please tell how to do that? I am using windows7. Thanks in advance.

I would recommend you to use grunt or gulp task runner with angular for development process. Configuring them will provide you excellent livereload watcher feature which is really helpful for development.
But if you just want to static host your angular file you can do it with
python:
install python first
then cd to folder with angular file in your cmd and try:
python -m SimpleHTTPServer
with NodeJS:
install nodeJS and NPM then try following in cmd
npm install http-server -g
and then cd to directory with angular files
http-server
Note that here any page name index.html in folder will be consider as default page on loading localhost url

I would recommend you to switch to Angular 4, because in my opinion is little easier and more optimized and you setup enviroment via nodejs with nmp, I learend that from here: https://www.youtube.com/watch?v=htPYk6QxacQ

Running react application in AWS EC2 server

I created react app using create-react-app.
I have deployed to aws.
How can I run it in production without using server like apache or nginx ?
Thank You.

You should install nginx on your EC2 instance.
Then, run npm run build. It will generate a build folder, that then should be used as nginx vhost webroot.
npm run build
Builds the app for production to the build folder. It correctly
bundles React in production mode and optimizes the build for the best
performance.
The build is minified and the filenames include the hashes. Your app
is ready to be deployed!
Simple as that.
Or,
For environments using Node, the easiest way to handle this would be
to install serve and let it handle the rest:
npm install -g serve serve -s build

How to run angularjs documentation locally

I have compiled the newest angular.js and find out that links in the doc all point to absolute URL angularjs.org/.... I want to be able to read the doc locally.

You have to run a webserver ("python -m SimpleHTTPServer) to properly browse the docs.
As an alternative, you might want to try Dash for offline documentation for many APIs - http://kapeli.com/dash

"Dash" which is mentioned in another answer costs around $20.
For a free solution, check out http://devdocs.io/
Clone the angular source code in order to have access to the docs directory of all released (and yet unreleased) versions locally.

Local AngularJS API Docs
Here's how I hosted the Angular.JS documentation locally, on my Mac:
Download the zipped version of the Angular.JS Build, which contains both the builds of AngularJS, as well as documentation and other extras.
Unzip the Angular.JS docs folder.
Download and install Node.JS.
Using Mac Terminal, install the npm package http-server globally so that it can be run from the command line.
$ sudo npm install -g http-server
cd to the Angular.JS docs folder and start-up http-server.
$ http-server -a 127.0.0.1
Starting up http-server, serving ./ on: http://127.0.0.1:8080
Use your browser to view the docs # http://127.0.0.1:8080/index-production.html
Note:
Using the default served by http-server (http://0.0.0.0:8080) and http://0.0.0.0:8080/index-production.html in Chrome will end up in a google search. Alternatively you can create a bookmark and Chrome will stop searching for it.

download the lastest version of the doc, then run python -m SimpleHTTPServer, in your browser enter the following url: localhost:8000/index-production.html , it works for me.

If you want a complete local AngularJS documentation, you can clone the angular/angular.js repository on Github. The nodejs webserver is already included.
You just need to install nodejs dependencies (npm install) and build (grunt package), and you can run the local webserver with grunt webserver.
All the documentation (API, tutorials, etc ...) will be available on your computer at http://localhost:8000/build/docs

For a free and open source version of Dash, use Zeal to provide offline documentation. It's also very nice when integrated with your editor (Submlime in my case).

if you are developing a site using "localhost/your-project"
and refer the angular.js file as:
"localhost/your-project/js/angular.js"
then, you can access the docs by:
"localhost/your-project/js/docs/index.html"

For those with WampServer (or anyother *AMP application ),
Simply point your Web Browser to your offline docs ,
http://localhost/angularjs/1.5.3/docs/
it works like charm.

Resources