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
Related
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 want to build full-stack application with Nuxt.js. I am wondering where I should create my server-side inside Nuxt.js or maybe I should create separated project only for server stuff.
I am trying to set up my project but I do not know how I should do it. The application which I am building will have own front-end, back-end and also database (I will use MongoDB) but actually I do not know how I should start. I was reading a lot about SSR and Nuxt.js seems really good if am planing to use Vue.js on fronted. While creating nuxt app I can choose to use Express and then I can see server directory inside my directory structure does it mean that i should build all back-end inside this directory or maybe it is only for small stuff?
I have also another question what if I want to use Nest.js on back-end can i just use npm i -g #nestjs/cli and then nest new project-name inside my server directory ? I was looking also for this answer but almost all results in google for this type are about (comparison between Nuxt.js, Next.js and Nest.js).
It will be my first bigger full-stack project and I want to do it right but I am a really beginner in this so I am looking for answer from more experienced programmers.
You can run express or any node.js server you want inside Nuxt.js. When installing Nuxt.js with scaffolding tool create-nuxt-app, you can choose integrated server-side frameworks : Express, Koa, Hapi, Feathers, Micro, Fastify, Adonis (WIP). There isn't offical Nest.js integration, but you can easily find a starter kit on github.
With create-nuxt-app, if you choose to use any node.js server inside your nuxt app, you will see a server directory inside your directory structure, with the corresponding server-side pre-configured index.js file.
Here is my own feeling about it:
I think the inside solution make sense for a small SPA or Headless project (Ex: parse and serve files, a simple JWT Authentification, a small websocket server...), or for a front-end logic application that cannot fit in client browser and who are nothing to do with the database (like image or file computation).
But generally, this server run the database layer for your Nuxt application: a REST or GraphQL API. It can also run your business logic of your app, serve authentification, and more and more when project growth...
If you think about separation of concerns and microservices
architecture, do not use server inside Nuxt.js. Splitting both frontend and server will result more flexibility. You can host frontend and API in different servers.
So now, do nuxt.js really need a node.js server ?
Yes if you plan to use it in SSR mode, No if you plan to use it like a SPA or Static generated way. Docs here... .
In SSR mode, nuxt.js ask data to your API at the first rendering, and provide a complete SEO compatible page to the client browser or bots. It also provide all javascript that the browser need to navigate and fetch your API. For that, nuxt.js in SSR mode should run with node.js.
I assume you said "back-end" for your API and your business logic application, in this case, you should separate nuxt.js and your server. Two node.js instances to run both.
Request you all to please help me on below question:
Premise:
I have created a working application- client-side using angular2 and server-side using node.js (Rest services are used). Both client and server using the different default port 4200 and 3000 respectively. Since this application is not that big and my company doesn't want to open any extra port for security reason hence I was suggested to move all angular files to node.js server which then thereafter host the entire application.
Question:
How can I move all my file from angular2 and add them to node.js so that it works as it was working before? There are many dependencies exist in angular2, similarly, it bootstrap components in a different way then how can I use angular files in node.js?
Any suggestion or solution are deeply appreciated.
You can you ng build. This command will generate a dist folder and your node server can read it. If you use expressjs you can see the example MEAN Stack (Angular 5) CRUD Web Application Example .
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 am using angular2 with nodejs, how about using apache/xampp. will it support or nodejs npm server is mandatory for angular2
Considering for development ,NodeJS is Mandatory for angular2 !
let me tell you why?
Angular2 comes with typescript support which is transpiled into javascript.
NodeJS offers typings & other dependency packages like SystemJS,RxJS which helps angular2 do thye magic you call Angular.
Though you could run angular2 apps in Xampp but recommended approach will be with NodeJS as it offers a lot more flexibility & framework support for development.
for eg. Angular-Cli is node module which helps you setup your project really fast.
On top of that node gives you flexibilty to add third party libraries easily into your project.
You can use Xampp but then you will need your server to load transpiler manually which will transpile ts files into javascript files as currently there is no support in Xampp as far as I know and that will be quite a task to do.
So I will go with NodeJS on this.
For production:
once you build bundle from your application , it can be deployed to any server which runs javascript. So in that case NodeJS is not required.
It depends on what we are talking about.
For Development you must have NodeJS on your dev machine to load all libs, transpile TS, prepare build files and so on.
For Production server you can use whatever you want, if you have already prepared js bundles with all deps and your app, just static files with index.html, css, js, jpg files and so on..
I will also recommend you to go with Oleg Barinov.More over Angular2 applications only consist of static files so they can be serve by any static Web servers or server applications that can define static folders (Express, ...)