I have been developing JEE web app using Spring Boot and jQuery so far and this is the first time I am developing a NodeJS/ Angular2 app. In JEE application, both client as well as server side component gets compiled into a single jar/ war file. However, in my new development environment, I am developing client and server side as two separate projects (listening to different ports) and calling the backend url from Angular2 service layer. I am having Cross Origin Resource Sharing (CORS) issue.
My question is, is this common practice to develop Angular and NodeJS as two separate application and resolve the CORS issue through using cors module in NodeJS?
I found some solution as below from Node side:
var cors = require('cors')
var app = express()
app.use(cors())
So, I appreciate if you can help me clarify
Right project structure in this architecture
Recommended resolution for the CORS issue.
Regards.
Yes, it is quite common to use two separate projects in for the front- and backend. But this doesn't mean it's the best or only way to do it. It always depends on your specific requirements and the size of your project. For smaller projects it's probably easier to have both projects in the same repository, but this is a personal preference.
Regarding CORS it really depends on what you are trying to do. Just because you have two separate repositories doesn't mean that you have to serve them on different domains/ports. For example, you could use nginx to route the requests to your API or frontend depending on the url. If they are not hosted on the same domain/port you have to disable CORS, as you said. Try to make the rules as strict as possible and only allow your specific domain.
Related
I am trying to create a general web service using Nextjs.
In my research, I often see cases where Express is used as the backend for Nextjs.
However, Nextjs has an api function.
In what cases do we need to use Express for the backend?
Well, you don't really need Express as the backend server. You should be able to use any framework from any programming language. I guess the reason that you often see it used is because it is the best documented.
Regarding api routes, you will always have to use some kind of backend server as it does not work with next export (aka creating a static folder containing html, css and JavaScript).
I'm trying to set up a server and react app to both serve from one place, and host from one domain. This gives me the advantage of one repo and being able to use server side cookies instead of auth tokens.
See also this link: https://dev.to/nburgess/creating-a-react-app-with-react-router-and-an-express-backend-33l3
I also prefer to use typescript.
I really think this would be a good approach, but it is hard to find resources. All courses, free or paid, are working with separate React / Angular frontends, which then need to fetch data from a backend on a separate domain.
Does anyone know a good resource how to combine a react frontend and an express backend and host it from one place? Or are there good reasons not to do that, which I just don't see at the moment?
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'm trying to understand how a MERN app fully works, I've been reading about MongoDB, ExpressJs, ReactJs and NodeJs, I also understand how MongoDB, ExpressJs and NodeJs interact and how ReactJs works on its own, my question is simple (I think).
The question:
If I create an API, using Node,Express and Mongo, and I have an APP managed by React, both need a server (via express, I understand), then, how should I run the API and the React app at the same time. Do I need different URLs? should I configure different ports? how should I integrate them?
I really been reading a lot, but almost every tutorial is made locally (and I'm working in a server with Passenger and I can't change the way it starts), just for Node/Express(with pug or else)/Mongo or just React, and I don't understand how to connect the API and React.
Thanks
It depends on several factors: environment (e.g. development, production), and your control over the server. For development, you can have two different URLs and use something like Webpack Dev Server. Normally you would have the module bundler, e.g. Webpack, watching for changes in your React code. However, this can get more complex if you have Server Side Rendering.
For production, normally you would have the bundled file for your client side application already optimized and minified. If you can change your API, you could serve it statically in a new endpoint, for example: /static/bundle.js and request this endpoint from your index.html file, which will be sent by Express.js server when accessing /.
However, because you will probably want to have routes in your React app, your server will need to know how to handle the client app routes (for example app.get('/*', () => ...), and they could collide with your API endpoints. To solve this, you could:
Prefix your API endpoints with a namespace, e.g. /api/v1/...
Place the API in a different URL, port or subdomain. In this case you would indeed need to run these two servers in parallel. With Node.js, there are helpers to make this more convenient, e.g. concurrently.
Pulling out your concerns: API, React, and Integration for MERN app.
I use three approaches
1) Use foreman. With this, you can specify your API and Web Client in the Procfile. I used it here
2) Use a proxy to handle requests that require your API. So in package.json, you specify your API URL(your API must be running)
// package.json
.......
.......
"proxy": "<path to url:[port no if you're developing locally]>"
Check here.
And you can simply add a script to run your API and React concurrently.
3) Set your API and React app in a Docker container. mern-starter is a perfect place to check for this.
Hope this helps!
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.