Is it possible to use Polaris React with PHP backend?

PersistentDev
Shopify Partner
7 0 1

Hi all,

I'm quite new to all the modern front-end development, all I'm used to is good old jQuery. For now, I use CDN-hosted Polaris CSS at my app.

But now I want to use Polaris React components, but I've found myself in a huge mess here. I was able to install Node.js on my development machine and play around a bit. I see how to use all that in the Node.js environment, but I'm totally confused about how to make it work with the backend.

For example, the simplest thing ever: let's say, I have several announcements in my DB, which I want to show to my app users as banners on the main page of my app. How I do it now: I query the DB on the PHP backend, then feed the results to the frontend (to the view), where I iterate through them (also with PHP, foreach) and display with simple HTML, like <div class="Polaris-Banner... etc.

But how can I feed this PHP array of messages to React, if all the React code is in JS, and runs on Node.js only? I've tried to make a bundle with Webpack, but it only displays what was predefined in the JS code, and no connection with PHP backend is possible.

I've read all the documentation, both on React and Polaris, and I've totally broken my mind, the solution seems to be non-existent 😞 Please, help.

Replies 7 (7)

SBD_
Shopify Staff
1829 269 405

Hey @PersistentDev,

 

If you're using React, your PHP backend can act as an API.

 

Consider running through some React tutorials to solidify the frontend/backend concepts.


Here's a basic AJAX walkthrough: https://reactjs.org/docs/faq-ajax.html

Scott | Developer Advocate @ Shopify 

PersistentDev
Shopify Partner
7 0 1

Hey @SBD_ ,

Thanks for the reply!

 

Yeah, I've thought of that, but it means I'll have to restructure the whole app, which is a *huge* amount of work, which will take even longer since I'll have to familiarize myself with the new technology, which I can't afford now since feature updates are due.

 

So is it the only option?

SBD_
Shopify Staff
1829 269 405

Alternatively, don't use React. If you'd still like to have the Polaris look, you can use the CSS classes (but you'll need to take care of the functionality yourself with JavaScript).

Scott | Developer Advocate @ Shopify 

PersistentDev
Shopify Partner
7 0 1

Yeah, I already use Polaris CSS, as I mentioned in the start post. The problem is that not every component is usable with this approach, for example, the Datepicker: it's completely useless without JS code. Yeah, it's possible to program it from scratch, but once again, it's a hell lot of work, doesn't seem practical at all.

 

It would be really great if, for example, plugins for jQuery were available for such components.

SBD_
Shopify Staff
1829 269 405

The problem is that not every component is usable with this approach

That's right. You'll need to write your own JS if you're not using React.

 

Yeah, it's possible to program it from scratch, but once again, it's a hell lot of work, doesn't seem practical at all.

That would be a lot of work. It seems like Polaris isn't a good fit for this project.

 

If you're eager to use Polaris, learning the React basics might be quicker than rebuilding the components with jQuery.

Scott | Developer Advocate @ Shopify 

PersistentDev
Shopify Partner
7 0 1

If you're eager to use Polaris, learning the React basics might be quicker than rebuilding the components with jQuery.

Indeed, that's what I was thinking first. But, as I've already mentioned, it means that my whole backend will have to be completely rebuilt. Which is also neither quick nor practical.

 

Anyways, thank you for your answers.

sravans
Shopify Partner
23 1 6

Hey @SBD_  

I'm now using direct CDN link, but the latest one do not have colors defined. The older one does have fallback colors declared for variables.

Now with the latest CDN link, most of the colors from my app are gone (e.g., no background color for Buttons, search bar, dropdowns etc.,). 

As no one seem to be reporting this problem, may be I'm missing something basic? I don't use react, just plain Polaris with the CDN CSS.

Any inputs are very much appreciated!

Thank you.