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
Related
I need to deploy a Next.js app, but not on Vercel. What are the steps to deploying it?
I used to drag and drop the build folder from React to the server, but in Next.js I don't know which files I should deploy and how.
NB: I am using getServerSideProps so next export will not work.
A node environment where you can use next start is required. Therefore, you can use any platforms that offer servers, such as EC2, Digital Ocean, Linode, etc.
Because I need to deploy on a variety of servers and platforms, not all of which desire to have an additional node express server running, I have transitioned to Gatsby.js entirely. Same static page delivery as Next.js but no need for node or express on the server. Drag and drop the build folder into any server folder - just like React.
I have 2 projects, as shown in the following images.
The Node, and Express project is in the root folder, and the Angular CLI project inside of angular-src folder.
I can run each project individually, back-end on port 3000 with node app.js and front-end on port 4200 with ng serve
What is the best way to integrate both projects, and the easiest in deployment?
Full Project Folder
Full Project Folder with angular src files shown
Most people keep their frontend (fe) and backend (be) in separate repos. This makes sense when you think that you can have multiple fe's for a single be.
However, its often easier just to keep them in the same repo. Then when you deploy you only need to clone one repo.
Also, it depends what route you do down. Will you installed Node.js etc on your server or will you go down the docker route?
People often like to use docker to containerise their fe and be. The benefit of this approach is that you only need one dependency installed on each server you deploy too, that is docker itself. Everything else exists in the docker world.
Also, docker makes it easy to docker pull from any server. If things go wrong, just kill your docker container and spin up a new one (assuming your data would not be lost in doing so, not a worry for the fe but a be concern).
Obviously, there is the docker learning curve but it's not too painful.
I suffer a lot in the past with angular apps and social media, so I'm glad to see that Angular Universal is being developed.
Currently I have some apps that are Angular4 as front end, and Java with Spring as backend. As far as I know there are some ways to implement Angular Universal here but they seem pretty complex (at least is what I read). So I want to know if that is in that way or not...
But anyway, my main question here, is because I saw that in order to implement Angular Universal we should have (ideally) to make the backend with nodejs, how to structure these two technologies, I mean... Should I have Angular app as a frontend app and Nodejs app as a totally different backend app (just like Java) where both are connected with web services? Or should I served Angular4 SPA direcly from Nodejs views?
And where should I place Angular Universal here?
Now that Angular CLI v1.6 is out, there's native support for building Angular Universal into your projects easily using Node.js! Essentially, you would ng build --prod to create a dist/ folder, and then create a simple node back-end and connect to your dist/ folder containing your front-end code. This article gives a great step-by-step guide: Angular server-side rendering in Node with Express Universal Engine.
When you use Angular Universal, it is going to be a single process (Operating system process) that hosts and serves your Angular pages.
In production you may have multiple such processes behind a load-balancer.
Your back-end APIs (if developed in Javascript) may be hosted in the same Node server or in separate server.
The Angular Universal setup steps are detailed here in the official documentation.
However, I had a few wasted hours to find out the following point
Webpack 3 is not compatible with ts-loader versions higher than 3.5.0. At the time of developing this, the latest version of Angular CLI is 1.7.2 which uses Webpack 3.*. Hence, while setting up Angular Universal, install ts-config#3.5.0
Finally, here I have a seed project for Angular Universal. It uses Vagrant to locally setup the development environment. Also, by tweaking an environment variable in your local host machine, you can run it in a production mode in a Docker container. The steps to run it are detailed in the readme file.
If you refer to my Dockerfile in the above Github link, its entrypoint reads:
ENTRYPOINT ["pm2-runtime","start","/home/aus/dist/server.js"]
So, you see, it's just a singe command, and your app is up and running at port 4000. Of course you can use other command line parameters to provide memory limit, port and so on.
I'm building a Nodejs + Angular2 project for the first time and stuck with architecture design issue.
There are following possibilities:
Develop Angular2 project separately, build and copy the files into Nodejs project
Develop Angular2 project from within Nodejs project (say from public folder)
Run two servers for Angular2 as frontend and Nodejs as backend (how to do this in shared hosting then? AWS is fine)
Using yeoman for creating projects for both Angular2 and Nodejs.
Which is the best option?
Any other idea?
2 is basically the solution. The work flow goes like this:
Start Angular Development Server.
Start NodeJS server.
Once you are ready to go live:
- Compile Angular and build out into a public folder using ng build. This folder will be accessible to the public and holds html files, javascript files, etc.
- Then, you use Nodejs to direct clients to those html files. When you use NodeJS or any other backend, this is typically how you will serve the Angular 2 files. It is also possible to develop Angular 2 SERVER SIDE instead, however, this is a bit harder and I wouldn't recommend it unless working with another framework entirely. Here is a really great tutorial that walks you through it:
https://scotch.io/tutorials/mean-app-with-angular-2-and-the-angular-cli
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.