I have a React app linked to the backend (Node.js) where I can make calls to the API. I used a proxy that points to my backend port, and now I need to add another proxy to fetch Cloudinary API.
I tried to declare proxy as an object but didn't work, also I tried the proxy-middleware method but nothing happened.
Thank you.
Is it possible to combine a Vue.js app with a restful API service?
New to Vue but written my first Vue/Typescript app that is a front end that consumes some public APIs, add extra logic and display results. All works – fine. Now I also want to have my own restful API interface.
I know Vue apps are SPAs, so when I ‘change page’ to myapp.com/page2, it is not fetched from the sever but rather the app just re-renders the display. But is it possible for those routes that are not defined, such as myapp.com/api/whatever, to be a restful interface? That is, consumes requests and return responses? And when hoisted, would a user have access to both a front-end and a back-end, even though the app is running client side?
Did start down this route using express.js but ran into issues as if I was trying to combine chalk and cheese. (Not lease, would need to change the node module to ‘commonJs’).
Would using Nuxt help? Know nothing about Nuxt … yet. Or must I go the traditional way, and write a separate back-end and change my front end to consume it.
I have an existing backend with a REST API written using node.js/express.
I can call urls e.g. /getallhouses and get the corresponding JSON object.
Using a mobile app, this is rather straightforward as you just call the REST API and process the data.
As I need to also add a webapp e.g. with React.js, it seems more murky.
What is the best way of implementing this webapp strategy?
Creating a stand-alone react.js app which will be called by the user first and then is using the REST API like a mobile app and hosting that react.js app on a different server?
Or is it better to start from the already existing express/node backend and serving the initial index.html file by
res.sendFile(path.join(__dirname + 'views/index.html'));
and putting all react.js related code into views and letting the backend serving the required react.js app to the user?
The best way is probably that you create a react app with redux and compile it to a bundle with something like webpack. Then you could host your page completely static.
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 am writing my app and I want to do the following:
On the first request, I serve all the client side code (views, models, controllers, css ...) and subsequently I want to do RESTful api calls to the server to populate my app with data.
I've been looking everywhere but can't find a complete example. Connect serves a static directory but after that I don't know how to route RESTful api requests.
I'd recommend that you use Expressjs on top of Connect for request routing:
http://expressjs.com/api.html
Its a very straight forward framework, with tons of tutorials online. Here is a good one for getting started:
http://coenraets.org/blog/2012/10/creating-a-rest-api-using-node-js-express-and-mongodb/