I am trying to build a nodejs api, I am wondring how to make it only accessible by my frontend application (MERN stack). Because others can see from the console in the frontend site the address of my backend appilcation built using nodejs
I tried cors, but it's still accessible via POST MAN
Related
I am using Blueprints to create two separate modules, one for api and one for website. My APIs have a route prefix of api. Now, I am having a route in my website called easy and it will be fetching a JSON from a route in api called easy and it's route is /api/easy.
So, how can i call /api/easy from /easy.
I have tried using requests to call http:localhost:5000/api/easy and it works fine in development server but when I am deploying it on Nginx server, it fails probably because I am exposing port 80 there.
When I deploy my webapp on nginx, it show up perfectly just that route /easy throws Internal Server Error.
Okay so what worked for me is I simply ended up calling the api function from the frontend rather than doing the POST requests. Obviously, it makes no sense creating backend routes for flask seperately when you are using Flask too in frontend. Simply, a seperate utility function would be fine.
I have a question and got confused with the articles I found on the internet.
I have a react App which deploys on the development server. I want to create an admin part, where the administrator will be able to push content into the database. React App will get content from a Database and render it.
Also after the development, I want to upload this on hosting so users from the internet can have access to it and use it. I understand how the server works with post\get requests from glitch projects.
Writing on React.Js, server with express.js
So can someone explain to me the following:
how the server sends React app? Should I send simple index.html with #root div and the whole website will work?
I am a bit confused about how hand-made server and API are different from hostings? How to connect then backend with a hosting?
IN VSCode is it possible to make a react App showing from the server of Node.js? - On glitch I can
sendfile index.html with simple request and I see the landing page.
So theoretically I should have a possibility to send static file through a server of Node.js/Express.js?
Can you explain these questions to me, please or provide some resources where it explained? Currently I'm watching Youtube and Google but how to connect it with my project I do not get a clear idea.
Pretty much. If you use create-react-app to build your React frontend, the build result folder will contain all the static files required (HTML, CSS, JS, images, fonts...). You can then either have your Express app serve it as static data.
"Hosting" is a nebulous term... No, you can't upload a Express/Node.js app to some PHP web hotel and expect it to work. You'll need an application-hosting centered provider/PaaS such as Heroku.
When developing a react + backend app locally, you'd have your backend server running, and the frontend dev server up to serve your frontend and configured to proxy all API requests to the backend server (like this, via the Create-React-App docs).
I am studying NodeJS and React front-end. And I want to test what I have learned by making a web page.
I want to create two servers: back-end server to provide API, front-end server to manipulate data by communicating with back-end server through AJAX.
In backend server, I will use NodeJS(expressJS). I have been reading below link to install expressJS server.
enter link description here
but I am stuck on choosing which template engine do I use. Since I want my back-end server to be provider for just only API - besides, I am not sure what API means correctly, I guess it is for manipulating data throguh AJAX
So simply my question is,
What template engine do I have to adopt in my back-end server?
I am currently working on a small project where I used vue.js to build the front end and express.js for the backend.
For the frontend, I have another express server to just serve the static files and all the requests will be redirected to my backend API with proxy by the frontend server.
For the backend, it is just an Express API app.
Both apps are runing on heroku right now. And my questions is:
What is the best practice to connect the front end and back end server, I did a lot of research online and people are saying backend API are not supposed to be exposed to internet？ I am not sure how I can talk to my backend if it is not on internet.
For the frontend, I can use SSL/TLS to protect the connection. But for frontend to backend server communication, what should I do to protect this data transfer, can I use another SSL/TLS? And should I use some mechanism to verify that the request is sent from my frontend server, not somewhere else? If so, what is the recommanded way to do that?
A lot people say that there should not be direct connection with database, it should go through a web service for security. What does that means? Now in my backend Express app, I have line of mongoose.connect('mongodb://someaddress/myapp'); Is this bad practice? If so, what should I do to make it more secure?
Please try to be more specific, I am still new to theses and try to learn, code examples can really help. Much appreciated!!
Vue and Express apps are written in the same language, so it is best practice to have these as separate projects as you have done. These are entirely different projects doing different things so they should be split.
You already deployed to Heroku, so the SSL/TLS isn't really a concern for you. However if you were deploying to your own VPS, you'd want something like Let's Encrypt. For restricting requests from Express to your Vue app, you'll want to look into CORS. See expressjs/cors for more details.
The Express app is the service connecting to your database. If you were trying to directly connect to your database from your Vue app, then that becomes an issue. You would coupling client side code with server side code. What you're doing is fine.
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!