Implementing Spotify API with React - node.js

I apologize if this is a really basic question, but I am a beginner with a fundamental lack of understanding of how a React app works. Right now I am creating an app which uses Spotify API, including authentication. With React, I want to be able to fetch the data in my components. However, the API does not let me as it is meant to be fetched from 'server side'. My question is, how is the distinction made / how would I go about creating a 'server side' where all I do is authenticate and retrieve data from the api?

React is:
A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES
So it is meant to develop client side of the applications (even though this can be done server side). Therefore would not it be better to use one of existing client side packages to access spotify api, like these ones: Spotify Web API JS, Spotify Web API Node
More packages are mentioned in the
spotify web api page, have a look.

Related

When ExpressJS serves API only, what template engine do I have to choose

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?

Using Oauth2 Node library in React app

currently I have a React app, there I need to authenticate using OAuth2. I have the server, url's,callbacks, and clients already, now the only thing that I need is to exchange the code sent by the OAuth2 server for an access token.
I was reviewing some libraries that are made for javascript to handle these situations, for example:
Simple Oauth2
Passport
I was trying with simple-oauth2 however I see that it's made for node.js applications, and they use require to import the libraries. My question is, can I use that kind of libraries on client side using React? if so, which is the correct way to import that library inside my component? because readin their examples they are focus on express/node apps. Am not really a Javascript or node developer so I need help in this.

Separating frontend and backend (as REST API)

I am doing a side project, with purpose of learning to separate front-end and backend, and I decided to use express with node, to design a REST Api as my backend.
My question is, how do I authenticate my restful api. I saw some tutorials, but they always connect frontend and backend by using serverside rendering with jade or ejs, and I'm not interested with that.
How do I authenticate each user and give them access only to certain data and also how do I design endpoints that are only accessible by my front-end application?
I would really appreciate help. Also you can send links to articles that describe this king of authentication and project architecture, because I feel that i'm looking in the wrong places, and need some help.

Making Firebase and Angular2 project

I'm new at Firebase, I'm starting making a project which has to include Firebase and angular2, but I am such confused about how to implement them. I don't know if a there's the need to have a Back-end implementation (like Java or NodeJs) to handle some security issues (like form validation, authentication, routing etc), or it's enough just implementing Angular2 to handle all these issues. I would be so Thankful about any helpful advice how I could implement these both technologies to build my project successfully. Thanks
first firebase is something like your backend firebase can safe get and send request as your backend apps...
and angular js will do the rest like you just said andd all the backend stuff you can handle by firebase :)
This is my simple explanation on how this 2 works together
Always keep in mind that Angular works only in front-end. Its domain is the look and feel, application events, sending data to server and anything else that has something to do with displaying data is coded in this area.
Backend services in the other hand interacts with your database, creating business logic, handling authentications, saving / sending of data and other stuff that interacts with the database is coded from here.
Now how these two interact is done by the frontend service to send HTTP requests to the Server which is the backend service. This is done by using Angulars $http service or the so called jQuery AJAX or the infamous XMLHttpRequest JavaScript native. New technologies today utilizes Web Sockets which is being used by Firebase and some other frameworks, Web Sockets offers a faster way sending / fetching data from server.
The server then interprets the data being sent and send appropriate response. For example getting user list, saving profile, getting reports, logging in, etc.. It would work in this workflow.
1) Angular sends http request to server to get list of users.
2) Backend service installed in the server then interprets the data being sent.
3) Backend service then gets list of users from the database.
4) Backend then sends the data back to the frontend service.
5) Frontend then recieves server response and displays the data to the view.
Also these two is coded separately. To have more detailed explations research about how frontend and backend services interact you can find so much resouces in Google.

Client Only and Tokens?

to access/write to a feed from the browser / Javascript, this answer says that you have to
Generate a token on the server (using API key+secret),
Provide that token to the client (just render it somewhere)
Use the token from in JS when accessing the feed
My problem now is that I basically have no server side. My app uses Polymer, so everything is running on the client and I have no way of creating those tokens (my app is served through Firebase, and I guess all it does is serve the html files).
With the polymer/firebase setup, can I still use getstream.io somehow?
Thanks!
We don't have any interaction with Firebase directly, so you'd still need some piece of middleware to handle API calls and generating these tokens.
It's an interesting idea, though. I'll add a TODO item to look into Firebase interactivity via a plugin in the future.

Resources