I have the basic question how the frameworks and platforms Angular 2 and Express.js in the 'mean' approach works together and where are the boundaries between client-side and server-side.
After reading much stuff to this topic I understand, that by calling the basic URL of the website (SPA) the Angular2-application will be send completely as package to the client (browser) where the (angular logic) will dynamically change the views by javascript in the client-browser as defined.
I also have create an angular2 SPA with some components, routing and services.
Now I have the general question to the backend.
I want to create a backend on the basis of node.js with the express.js framework.
-How I have to setup the entire Angular2 (frontend) application in the express.js backend application because express.js based on MVC too?
-Where are the boundaries between the model and view of angular (MVVC) and express.js (MVC) and where they play together?
It would be great if somebody can name me references, tutorials or relevant stuff to this specific topic.
Thanks in advance.
In reference to the MEAN stack, Express.js is not used as the MVC, but Angular is. Express.js serves as middleware / a framework to help build your API quickly than if you just wrote in Node.js (Express.js is a framework for Node.js).
What you said here:
calling the basic URL of the website (SPA) the Angular2-application will be send completely as package to the client (browser) where the (angular logic) will dynamically change the views by javascript in the client-browser as defined
Is exactly right, Angular 2 will act as the MVC, in browser, where the client will dynamically change views. Express.js will help you define the "basic URL" i.e. localhost:8000/ and what "package" as you have described, is sent to the client. This "package" is your entire Angular application.
One of my favorite tutorials is from Scotch.io, though it is Angular 1.x, it's still helpful for building any MEAN stack application.
https://scotch.io/tutorials/creating-a-single-page-todo-app-with-node-and-angular
The line
app.use(express.static(__dirname + '/public'));
Tells the application where to find all your JS / CSS / HTML files, or in your case, your Angular application. (Make sure your Angular application is in the directory that you list above relative to your Express/Node.js application)
Hope this helps!
Related
I'm a newbie in web development. I built a project before using Node, Express, and EJS (as my frontend) and now, I am trying to make another one using React as my frontend.
I watched and studied a lot of React + Express tutorial videos in Youtube but I think every video only shows a one-page site.
My question is how do I handle the routing of Express+React? Where should I put the routes and render multiple pages or views? Should I put it in the app.js under the Node folder? Or should I create another folder under the React app consisting of the js files for different views?
Thank you. I would gladly to answer questions if my post lacks information.
There's an interesting hand to it.
App
__|__
| |
Frontend Backend -->Database(MongoDB)
I think this scanty tree should do justice to it.
I'd suggest you use MERN
MongoDB
ExpressJs
ReactJs
Nodejs
Your apps need to be on different servers. This method is effective and secure.
Since you already know React, Express, Nodejs... You can check out this link (by cleverprogrammer)to see some MERN projects and how each part of the app communicates with one another seamlessly.
https://youtu.be/ktjafK4SgWM
I want to use react on my node.js website. Im using express and handlebars with this website. Is react supposed to be used on top of all that? Or should i not use handlebars or express with react?
Also what is your opinion on node.js? Is it a declining technology? Is there something else that is better for me to use?
React is a view library. Is mean to be used to build your entire ui.
Then you have two options you can use it to build a SPA - single page application - and consume data through network request to your server or render multiple pages each of those will be a react app.
Node + express are backend tech that can help you to build the server side of a web app here you can create some api endpoints to return data to the server and comunícate with the database.
Node is a very good choice as is still and will be used for long time and many companies.
I'm currently working on a new ReactJS application. In all the previous applications I've built I used Express for the server side rendering. I used Express because routing in production mode wouldn't work if I didn't.
So I've recently discovered that it's posible to just always redirect my React app to my index.html file and let the React routing just do it's work. This also works when I deploy my application to production.
I know Express can be usefull for SEO porposes but other than that I have no idea why I would need to use it. So am I just missing something? Or is it just fine to don't use Express with my React application if I don't need any SEO.
React configured as a Single Page App, renders the express routing all but unnecessary. The standard transition from a web server rendered app to a single page app is to change the server into a REST Web API and any server side data needed from the React App is obtained through AJAX calls.
So in most cases you don't need Express when you are using React to handle your routing except for in less common cases when you might want to use express as a reverse proxy or something.
If you want to do server-side rendering, you'll need a node server (typically but doesn't have to be express) to render your React components. This could not only help with SEO but also allow your page to appear to load faster (you wouldn't have to wait for the JS to download and run before the user sees the HTML).
If you don't care about the benefits, don't use SSR.
when deploying react application it is just usually an html and a JS file. So you need some kind of server to host it. Luckily there are services out there that offers that like S3, Github etc.
You're using Express because it can host the html and js files. So technically you don't need specifically express but you need some server that will host your files.
I am little confuse about how to implement this especially for routing, how i handle routing for backend and front end and how about i using source (css, html , js ) which it will be different between front and back. thank you.
Yes, that can be achieved using MEAN stack application.
Mean stack tutorial guide Click here !!
You Can Choose Angular As your front End Framework to work with user-Interaction that will be user seeing in his/her browser and Node.Js for Backend Interaction to your Angular Application for making API calls and fetching Data that you want not to be shared with users.
In regarding to routing question use Angular Router module that will handle how user move from one component to anthers on your Front-end.
In Back-end you can use Express router module to Handle your routing requests to specific urls.
You can use Angular 2 as Frontend and Node js as your backend.
Furthermore, the routing will be set on frontend to show html pages and to get the data or perform any sql operation or to put your logic you can use node js by creating methods and then calling these methods from angular 2.
I understand that Express resides on the server and Angular resides on the client but, as far as I know, Angular can do everything that Express can do which is
routing
interacting with the database
It kind of seems like maybe Express is needed in order for an AngularJS app to be served by Node.js but I'm not sure.
So what are the benefits to adding Express to an AngularJS app?
There are things which should be done server side (i.e. Express, not Angular), most notably user input validation - Angular, as it's client side, can be tampered.
Also, if you'll ever want to offer access type other than web app (i.e. mobile app), you'll probably need an API anyway - Express can do this, Angular don't.
Finally, database access - usually Angular app will need to connect to some kind of backend to perform CRUD operations. You'll either go with hosted DB like Firebase, or you'll end up using your own database. Latter scenario is more popular and you'll need Express (or similar) for that.
Express and AngularJS do not mutually exclude one another, they serve different purpose - in fact it's perfectly fine to use both - express for all your serverside logic, and Angular for client side logic.
Express can be used to host the APIs for AngularJS's service/factory to consume. You can consider AngularJS as MVC and the API on Express as SOA.
There is lot of stuff that one wants to control from server. And that is the place where the server side frameworks come into picture.
An web app is not just some html pages linked together. There are lot of other things that needs to be implemented
Model validation.
Keeping model consistent. Remember multiple users can access the same model at any give time and even change it.
Controlling resource access.
Triggering workflows.
Business Logic.
and other such thing require a server framework. So as mentioned earlier the client side frameworks like AngularJS complement server side frameworks.