How to separate the two projects (Angular & express) - angularjs

I pulled a project from github and it works fine for me.
However, I want just to know how to separate server side and client side projects (sockets part).
In other way, how can I run the two projects (angular project and express project) into two differents servers (for example angular project on localhost:8080 and express project on localhost:3000).
That's gonna help me also to use this code into ionic framework project :)

Solved !
1) in index.html I must call the socket.io file on my server :
<script src="http://localhost:8080/socket.io/socket.io.js"></script>
2) in components/socket.Srvc.js
var socket = io.connect('http://localhost:8080');
backend server port : 8080
Now I can run separately two servers without socket.io errors :)

Related

How to Develop React App on Apache Webserver

i have got a problem, which i am trying to find a solution for weeks now.
I think it´s an understanding error on my side, but i couldn't figure it out.
What i am trying to do:
Develop, not deploy, a react app on an Apache2 server.
I know that react is an frontend library, so it should be possible to do.
I also know that nodeJs is kinda required to "npm" all the packages and to create the "Simple" react app..
What i want also to do:
Use the MATERIAL-UI
Build a PHP Backend
Collaborate with my Team Members (they should also work on the react app)
Thanks in advance.
Hosting a ReactJS App is no different than hosting any other javascript code on any type of server - by having it as a static file on your web server and including it in the html returned from the server.
Depending on the way your React project is set up, you would:
use node to build a javascript bundle of your react app (possibly by running "npm run build" in any CLI),
include the resulting script file or files in the head element of your root or master template
Make the Apache web server return the needed page with the master template where the script tag is
Additional setup could include starting the PHP server and react development build at the same time, but that is highly specific on your setup and would require you to add some more information on used frameworks and setup.
It is not possible to deploy apps with Apache and React. The nodejs based- Webpack server is incompatible with Apache web server. You'll have to pick one server or another, you can not route index.html -> index.tsx and vice versa. Besides if you ever got both servers working in tandem with SSL, it's a technically security nightmare and has no production value. It's best to avoid java(script) all together as it's merit in real software development has greatly diminished. Mostly for gold diggers.

Use different variables for dev and prod with AngularJS and GruntJS

I am currently working on an Angular website that communicates with a RESTful API running on node.js that I built only for this app. They are two separate projects that runs on different ports.
While developing, I make the Angular app communicating with the local API. In production, the path to the API will be the IP address of the server. This is not a lot of work but I then need to change the address every time I want to deploy to production.
So here is some questions (sorry if this is a duplicate, I couldn't find it) :
Is it possible to create a two-sided variable (in grunt, in angular) in order to use some address (localhost) for development and another address for production ?
Maybe I got it all wrong and I should merge the API with the app ? I would have one big web server running on the same port and I could use relative paths and get rid of hostnames. How can I do to merge the express routes for the API with the angular routes ?
Thank you !

Debug AngularJS and NodeJS in Webstorm At Once (Without CORS)

I have a client/server app running on NodeJS with an AngularJS frontend. I want to use the built in debugging features of Webstorm, but it just won't work.
Imagine following scenario:
I have a webstorm project with a client folder and a server folder. I can start the debuggers for the client and the server, and it works. But both sessions are on different ports. So an AJAX request to the server inside the client doesn't work without using CORS and telling AngularJS to use a different server address.
In the production version the client will be published under the server, but for developing there is no need to do this.
Does anyone know how achieve this? Something like: The system should behave like one server, under one URL.
Or is my approach stupid?
Best regards,
Kersten

Cloud 9, Angular and Express

I've an angularjs project with an express 4 backend, both hosted in one cloud9-ide workspace. The node backend is running under process.env.IP (0.0.0.0) and process.env.PORT (8080). The Angular Project is living under a 'client' subfolder needs access to the backend within the workspace. The Angular App needs it's own port - right? How can I accomplish this task?
Thank you for helping me out, Günther
I'm not entirely sure what an 'angular project' means. From what I know from Angular it is more common to run Angular code on the client. This is probably why it is in a folder called 'client'.
If this is the case then express will serve the angular files to the client over the port specified. Angular will run in the browser and do all it's magic there.
If this is the case the answer to your question would be that you don't need another port and all should work as you've set it up.
Do note that Cloud9 only supports 1 port that is accessible from the outside. For most express + angular apps this is all you need.

Why we need web server to run Extjs4 projects?

As Extjs4 is made with .js files then Why we need web server to run extjs4 project ? I read in sencha documentation that....
"You must need: A web server running locally on your computer, for example, XAMPP (Recommended)".
Can we run extjs4 project on a local machine without installing web server (XAMPP/ Apache)? If so please tell me how?
Thanks in advance.
Web-server needs for process http-request (listening 80 port), as is: get data(JSON/XML), refresh parts of pages and etc.
If you open index.html in browser (without web server), you need using packager (sencha command) or include the whole framework js and all your project files into your index.html, either in form of a bunch of script tags or concatenated into a single file.
Otherwise, the Loader is using XHR requests that can only be completed through a web server (security issue - imagine loading client's system files though Ajax)
A Webserver is required only if you are using components which require dynamic data e.g. Grid Panel showing stock quotes. As stock quotes keep on changing, you will require a server to send the data.
You will not required webserver, if you are using static data. See DataStore Component for more details.
Web server is not required to run any extjs code because javascript runs in browser engine and extjs is purely javascript framework. But when we think of developing an application which should be dynamic in nature(most of the apps)deployed on server so that server request/response can be handled. And in most of the cases we write business logics in server which returns some dynamic data that can be shown in UI through extjs.

Resources