The plan is for me to use Drupal being the engine to output rest api data and the cms handling for the end user to add/delete/edit content.
React to handle the view layer and display how each page should look.
Is there a way with Drupal 8 to output in the rest api exactly what components/modules that the end user would like to use per each page? Rather than just a single node.
Thank you
Related
I want to use react js to make a news website with hundreds of articles. As I understand it, react makes single-page-applications. Surely it is not feasibly to include hundreds of articles in a single-page-application, so how could this be done?
You can absolutely use react to make a single page application which shows hundreds of articles.
The term single-page application describes how the articles are loaded when the user moves between the articles. In a multi-page application, every article will be its own html file. When the user clicks to go to a new article, your server sends a brand new html file, and the browser throws out the old page and shows a new one. In a single-page application, there's just one html file which is loaded at the start. As the user navigates between articles you use javascript to fetch data about that article (but not a full html file), and then you use that data to modify the existing page to look like a new page.
I have a blog built in Drupal8 with more than 10K articles. I would like to implement the article listing and pagination in ReactJS. How can I do this ?
First you should understand difference between, SPA (single-page application) and MPA (multi-page application).
Drupal generates pages in the back-end and sends to user (browser). ReactJS is a library to make SPA, which different from Drupal. You can use React with MPA, but it's a bit tricky.
You can use jsonapi get the data from Drupal.
I've angular app with lots of states and modules etc. Now, I want to send a link to the user. When user'll hit this url, I want to redirect him to a new tab rendering only that particular state (specified in URL) i-e I don't want anything else to be visible to the user. Or you can say, I want to open a popup window rendering that particular state's html in popup window . This is the approach that comes to my mind to sort it out.
Ps. There are Rest APIs at the backend which I am calling through angular resource service to bind data with the model of the views
Option
I've rest APIs on backend, So, I was thinking to developing s separate Nodejs application, And I will send nodejs application url to the user and in the default/home route I'll call backend API and, the returned resultset will be rendered in html file within nodeJs application and this way, I'll render the corresponding data to user's browser window.
This is the flow for that
I don't know if that is right or clever approach. Please suggest me what will be the best approach to sort it out.
Thanks in advance.
This is what my app looks like
Everything in the left side-nav is a module and clicking on this I am routing to a different state. I am using angular-material and lots of other dependencies in this project.
And this is what I want.
I'll refer a link to the user for example www.myapp.com/specificpage.html. And hitting this url, a new tab/popup will be opened rendering state defined in the same app but with some non-editable url. And it should like.
There are multiple ways to achieve this and each approach has advantage and disadvantage. You have to choose depending on requirement and architecture. Details are below-
Create a separate app - You can do it through separate code base or use the module based build process and include this module only for new app.
Divide application is two part, public pages and private pages - Include this page and required APIs for this page in the public modules for your app.
Send token in the link - If you want to make secure page, send short lived token in the eMail and validate token on the server before displaying page to the user.
I'm confused
it seems there is 2 way to run reactjs projects
1. in browser between html and script tags
2. not between html and script tags(it runs on browser) but it's different
I'm confused. explain it to me plz
React is a technology that is rendering custom web components into the browser, when you have a view, let's say dashboard composed of multiple React components, you have two ways to display that to a user:
1/ you display the html that typically contains the root React element and load an associated JavaScript script which contains all the React logic, then fetch the required data of that dashboard, so it will render all your graphs and stuff.
2/ when the user request that specific page, your server application already knows which data are required to render the initial view, so it will compute in advance how the page looks like and send a final first version to the user, it is called server-side rendering. From there obviously the page can be dynamically modified by local JavaScript running in browser afterwards, based on user interaction.
Both approaches have pros and cons, like testing capabilities, speed of execution, and so on... so I encourage you to read about the topic on the web, you can find tons of articles on React server-side rendering that will explain that better than me:
https://www.smashingmagazine.com/2016/03/server-side-rendering-react-node-express/
https://github.com/mhart/react-server-example
I'm using Content API for Drupal or Views 3 to return some data from Drupal 7.
Problem I am facing is with Content API, the documentation says to use query parameter fields[]=[field_name] to display just data for those fields instead of displaying all data.
That didn't work for me, when I tried to query it with content api like so:
http://wawineregions.com.au/wawineregions/contentapi/content?type=winery&fields[]=field_rating&sort=title&page=0
It doesn't display my "field_rating" field in the REST endpoint which I am expecting it to.
As for my Views, I am using Views 3. I have setup a new view and it returns the correct result in the REST endpoint if I only have say the built in field "title". As soon as I include one of my custom field such as the "field_rating", the REST endpoint returns me ALL data for ALL fields, which isn't what I want.
Example:
http://wawineregions.com.au/wawineregions/rest/views/view_wineriesbasic
I just want it to return my data for the two fields I told it to display, the title and the rating. Not all the other data attached with it.
I am using:
Drupal 7
Services 3.x
Views 3.x
Content API 7.x-3.3-apha
Does anyone have any ideas?