I'm relatively new to react and wanted to create an app that uses the Bigcommerce API to change product data submitted by the user through a form. My idea is to have a simple form for the user to input a quantity, for example. Once the user submits the quantity the want to change, the new number will be reflected on the product page on Bigcommerce Admin pages.
I have already created the same kind of app with Node with no front end. The app I made reads a csv file and calls the proper APIs to update their quantities. I wanted to create sort of the same app but in React with no csv reading abilities. I am having trouble with CORS errors now for some reason. I tried creating a backend with Node for this React app but I still get the same error.
I tried some other API. one that does not require authentication and that worked fine. I was able to see results when I do the console.log(data).
It seems that this Bigcommerce API won't work because it requires authentication, which I already have made on their backend several times to double check my work. I'm confused and not convinced that there is no way for a react app to fetch data from a remote server with credentials.
I figured it out, but I'm still convinced that I can do this with only a front end application in React. Without Node, However.
What I did was create an endpoint with Express using Node as the backend. Installed cors modules, then allowed requests coming from the front end URL address. Also, pay attention to whether you are using localhost:PORT# or 127.0.0.1:PORT#
to the browser these are different. Make sure they're the same when you open up the browser.
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 working on a project that requires developing a SPA using React, Node and Express. I understand Node/Express can serve static files and so my initial thought was I will write a react app and serve it via Express server.
But my Node/Express server also has other roles like, connecting with other microservices and fetch data, which will eventually passed to the UI controlled by react SPA.Sort of a controller! I am also planning to use Graphql instead of Rest.
Will the approach of using the Express server to do both serving the SPA and as a controller has any complication, or should I separate them as two different webapps.
I couldn't find many usecases for my first approach (keeping both together),but I could see that splitting them as two,like here https://dev-blog.apollodata.com/full-stack-react-graphql-tutorial-582ac8d24e3b
Any suggestions on what is the right approach?
Thanks
If you just wanna serve a static file you can use Amazon S3 bucket to serve your React app and throw a a CDN in front of it for optimal load times.
Its nice to keep the separated but it also depends on the size and scope of the project. If you wanna expand it later it might hurt that your API is also serving the app and all its assets.
Where as separating them will split the load from actual API usage and static asset requests (images, index.html ect...).
My general idea was that I was going to make a RESTful backend and then in my frontend request and render data by backend spits out. Is this generally how to layout a Node and React Web app? I'm new to front ends, any help is appreciated!
Yes this is how your app should be structured. The front end should make the API calls to your node backend and will just display the data to the user. This allows your front end to be very dynamic. If you ever want to expand your application later it will be completely independent of your backend. If you ever plan to expand to different platforms (mobile,etc) you will then be able to build those out as separate "front ends" to interact with the API as well.