Is this the proper flow of client-server communication? - javascript

I am building my first full stack application. I have two seperate apps, a client app built with create-react-app and a node express server to serve json.
Currently, my create-react-app which uses Redux, makes ajax calls using axios to the port that my server is running on. I have set up authentication for the server to exchange a token with my client upon success.
My goal is to make use of the Spotify API. For their authentication, it says I need to get a authentication token from their server via my server.
I am not sure the proper way to go about this.
Currently my thought process is to have my client hit a new route in my server via a axios ajax call to have my server asynchronously exchange the token with the spotify api and then send it back to the client.. is this the proper way?
I've seen various other examples of this being done but they have their node/express app manage the routes for their entire application.
Any help would be greatly appreciated thanks.

Related

Express Middleware just to handle requests between React and Python

I have a react-app and a python backend. The python API runs on "https://comapny-api.com". I define the URL in my .env file. Now I would like to implement a Node.js server in the middle. I just want that nodejs server to get the request from the client and send it to the python side and return back the response sent by the backend to the client. The only reason I am doing this is that I do not want anyone to know the final API endpoint I hit. In the network tab, I show the nodejs server URL so the end user is unaware of the final API endpoint. Is my approach a good one to take? If yes, can I write just a single method using express to handle this? Please advice.
app.get('/', function (req, res) {
res.send('root')
})
Will this template work? For example, if I call https://nodejsserver.com/years, will it hit this '/' GET endpoint and in turn call in my final API /years endpoint. I am wondering how can I call a generic endpoint in express, one for get and one for post and get the URL from req.params and call the python API with req.params. Thanks
If you have clear react-app without server logic, you can build react-app as js bundle and use it as static, and your python backend becomes the only web-server.
This approach advantage is infrastructure simplification (minus one backend and you still can debug your front separately), but some server logic can become more expensive, like ssr and routing.

nodeJS app as microservice for multiple web apps

I have a few applications. For each I need an authentication service, I have written this service separately. How is it possible to use this authentication service in different web applications?
The reason for separating is that I do not want to rewrite this service multiple times.
Would lerna.js be an idea to implement such a construct?
Or are there any more sensible solutions?
So you are using microservice architecture where you have written a completely separate application for authentication. This is completely fine.
Now what you would do is, deploy all the microservices and let other services to use auth server for authentication. How would you do that? Well, you can do it using our friendly RESTful architecture. Lets say you have a service X. When you try to access X, X would send a request to Auth server. Auth server will response back to the service X if you have access or not. If you have access then X service would response you back with data or authentication error.
Do you get me?

How do I call a Node/Express API key (.env) in Client-side Javascript?

Right now I am using an OpenWeatherMap API key in my client side javascript for a simple weather app (Node/Express). I know this is not ideal outside of development, so I did npm install dotenv.
On the server side, I can get and set the env variables just fine in Node. I can see them when I console.log out.
How do I call the API key in my javascript on the client-side? For example, currently my weather app has its simple logic in a file called weather.js and the HTML uses weather.js.
Ideally I would just like to call my api like http://api.openweathermap.org/data/2.5/forecast/daily?lat=${lat}&lon=${lon}&units=metric&appid=${process.env.WEATHER_API_KEY}
I know the .envs are on server side and you have to do stuff to make it work client side. New Node developer here who has read too much that I think I am confused between requireJS, Browserify, modules, .env, etc...
You don't want your API keys (or other secrets) to be public. Using them in the front-end would make them visible when inspecting the page and in the network requests log. You need to store and use your secrets server-side.
Create a route on your backend (which you protect from being used by other domains using CORS) which calls the weather API (using the token stored in .env on your server) and sends back the data.
Then have your frontend hit that route.
You will have to request the API Key from the server.
This can be done easily by making a simple route in your backend that will return the key as a response.
If you don't want to expose your API Key (I recommend you to not expose it), what you can do is create a route in your backend that will make a call to the WeatherAPI using your API key, and the client will send HTTPS request to your backend, which will then create another HTTPS request to the WeatherAPI and send the response back to the client.
You don't want to expose your API keys to outside world. What you can do is to create backend route (/api/keys) make it protected with CORS and call it from front-end.

How to get data from node.js server into Electron app?

My question is about:
I am currently trying to connect my electron application to my node server to get data from node.js server and print that data to my electron application. However I don't know how to do it. So could anyone help me:
To get data from node.js server into electron app?
The way you get data from any node.js server is you make a request to that server specifying in the request what you're asking for and the server responds with the appropriate data.
There are literally thousands of ways to physically make the request. The classic way in these days of web technologies is to make an http request from your electron app to an http server in your node.js server. You can make such a request from electron using the request() library.
You would then have an http server as part of your node.js server and you'd specify routes in that http server that handle the requests your electron client is making, fetch the desired data and send the data back as the response. In the node.js world, you can create a simple http server and a few request handlers in a dozen lines of code using the Express library.
This is the general approach. Further details on the exact request to make and URLs to use are dependent upon the details of what you're trying to do and the design you choose, none of which you've shared with us.

Server side JWT for my react-redux application

I am a beginner with react and redux. I have searched a lot but all I get is server-side rendering, but I don't want that (correct me if I'm wrong). What I want is this:
My react-redux app calls an API to get some JSON response. The problem is that there is no user authentication (and won't be). Therefore I want to have a Token for my API calls. I need my react-redux app to obtain a token on the server-side from my locally hosted PHP (Laravel) app through an API or HTTP request. Then set that token for my client-side of the react-redux app.
I simply don't know where to start and how to have this server.js in my react-redux app.
Here is a good starter tutorial explaining how to hookup use Node and React together.
https://scotch.io/tutorials/react-on-the-server-for-beginners-build-a-universal-react-and-node-app

Categories

Resources