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.
Related
I have no experience with Next.js and its deployment. Our team has been developing an app in Next.js and I need to deploy it into our Jelastic platform. I am very much familiar with Apache server and haven't used any other servers than that.
I found out that Next.js can't be deployed with Apache (or at least static export is not the best idea). So, I created a Node.js server environment in Jelastic and I have no idea how to make the application accessible. I read the Next.js documentation and it says that the production build files after next build are stored inside .next folder but I didn't find any entry point files (as in Apache) such as index.html in that folder.
I tried running next start and a server was started on localhost on port 3000, but I couldn't access that remotely.
I didn't find much about Next.js deployment in different environments anywhere. I am probably missing several things here, but I am clueless. How do I deploy and run Next.js application in Jelastic?
Basically, port 3000 is not open on the firewall side on the NodeJS nodes that Virtuozzo provides. I think the server would have been accessible if you had opened the corresponding port through the dashboard.
You can test if your application is accessible from the NodeJS node by doing a "curl localhost:3000".
Otherwise, I think the best way to make your application accessible from the outside is to use your NodeJS node as you do, but add a loadbalancer NGinx node in front of it. Change the configuration provided to point to port 3000 and not 80 of your NodeJS node. This should be enough.
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 have an Angular project with NodeJS backend. I am confused about how to deploy my project on a remote server? I decided to use webpack because of it's simplicity, so I ran the following command:
ng build --prod
And it made a folder called dist for me. I think I must copy the content of this folder into the public folder of my NodeJS backedn server, but I am not really sure if I do the right thing?
Should I change other configuration of my frontend or backend codes too? Or just copying dist folder into the server's public folder should solve everything?
You have a very good documentation guide by Angular: https://angular.io/guide/deployment
And yes, you should copy dist/yourproyect (Angular compiled to HTML+CSS+JavaScript+Assets) to any web server you want to deploy it.
For isolation purposes (and maybe configuration), I'd recommend to put front and back in different folders. But you can deploy it within NodeJS.
In short: A web server Apache/Nginx/IIS/GitHubPages/Firebase/etc for Angular and PM2 ( https://pm2.keymetrics.io/ ) to launch your NodeJS. But depending on your expected load, you may want to choose one server type or another.
Anyway, if you specifically want to serve Angular through NodeJS, I'd recommend this tutorial (2016, maybe bit outdated, but it will help): https://scotch.io/tutorials/mean-app-with-angular-2-and-the-angular-cli
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 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.