I have a scenario where there is a necessity that the users reload the vuejs app to get the latest vue app version when i update the whole application in the server including the backend APIs.
Suppose there is a chance that a user using the vue app version 1.1 already on production, will still be continuing to use the same even after the update at server (ie to 1.2). In such cases the backend APIs might have changed and it would break.
Any short and easy ways/methods to solve the above?
One way is to send the version number 1.1 or 1.2 in all our API requests to the backend. Then you check the version in the backend and send a special error if it is an old version. In the frontend you handle this special error by refreshing the page. Also make sure that your new *.js files have a new name so the client browser will fetch the new version and not load any cached *.js files.
Related
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 want to use React for a project I am working on, but I also want to use an API.
How can I do it?
I have tried to Google this and ask different people, but I have not got a response yet, so I thought I would ask here. I want to use express and maybe not use create-react-app (as it takes up a lot of storage).
Working on a custom server doesen't preclude the use of an API.
If you want fetch the API from the express server and inject it directly on react frontend you need to enable server side rendering (useful post) and pass the data collected as a props from the server (check this example).
Rather then you can build your react project (using even create-react-app) and build an express server who return the index.html on call.
Personally I prefer the first one solution.
I'm new to Apollo and JS on the server, but not new to React, GraphQL, etc. I'm trying to wrap my head around a clean way of having the server serve both the API, using Apollo, but also the client, which would be built with ReactJS and also Apollo.
I read the article on server-side rendering for Apollo. I might be interested in that in the future, but right now, I'm only interested in having a single project, deployed from a single server, instead of two.
Is it possible to do this cleanly? Is there a canonical way of doing it? can it use create-react-app or is that out of the question?
If you're not doing server-side rendering and just want to serve a Single Page Application (SPA) like what's built with CRA, you can do so using pretty much any HTTP framework or even without one. CRA just builds some static content for you, which you can serve using, for example, Express (see docs here). However, it's typically better to utilize Nginx or Apache for serving this content (at least in production). If you want to utilize Express or another HTTP framework to serve the files, you can utilize the appropriate integration for Apollo Server. If you're using Nginx, then you can stick with the standalone library, assuming you don't want to expose any additional routes on your HTTP server.
In development, you don't want to have to constantly manually rebuild your React application when you make changes, so CRA actually runs a server for you that serves the app and enables hot reloading. Because this is a separate server from your API server, you'll typically want to enable proxying your requests to the API.
It's possible, the setup for apollo is the same as any server, for example, you can use express to serve static files and implement apollo with some minor changes see the docs for apollo server express and implement the one that you are familiar with
Context:
I'm making a React website that draws information from the Google Sheets API and formats specific rows into a data visualization. There are columns I don't want to share because of sensitivity of information, and fortunately there are ways to share only specified columns, but that isn't why I'm asking the following:
Problem:
I want to have a Node API that handles requests from a React front-end, but whose code isn't available on the client's browser (for example, in the bundle.js file created during build).
Clarification: I have noticed that when running most Node-React application examples locally and when building them with webpack, you end up with one bundle.js file that contains Node request-handling code being delivered to the browser on page load.
Proposal:
Do I need to deploy two separate apps (one for Node, the other for React), or can I keep them together without the server code being visible to the client?
EDIT POST ANSWER:
you end up with one bundle.js file that contains Node request-handling code being delivered to the browser on page load.
This was untrue. The code I had assumed to be request-handling code was client side request-calling code.
It is already decoupled. There is nothing you need to do.
Note that the security of your node.js server code depends on your server configuration, not node.js. If you access your server via unencrypted file sharing or FTP then your node server code is still not safe.
Even when using encryption, avoid compromised protocols such as SSL or TLSv1.0 (use TLSv1.3 instead for things like FTPS)
You can add a simple authentication system. There are plenty packages out there for Node already, so no need to implement it yourself.
Specifically, this would prevent the backend from sending sensitive data to a unauthorized request.
EDIT: Just for clarification, code run on a Node.js server is not sent out publicly, it will run on your server and send its output to the frontend.
EDIT 2: Looks like I misunderstood your question.
If your code is not decoupled at the moment it will need to be. All code of a React.js project is sent to the browser. Since there is no backend to handle any kind of access logic, any such logic would have to be in the frontend (React.js), where it could easily be circumvented.
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!