Implement Create React App App on a Shopify Page

[jpanuncialman]

Problem

Hey there! Looking to add in an app made with Create React App on a page. I implemented all the files from the /build folder and embedded them in the theme.liquid

while pointing it to a div in a page template. Unfortunately, the app is not rendering. Any advice on how to implement a react app onto a Shopify theme?

[t-kelly]

I don't have any experience with this, but I'll leave this thread open for others to contribute.

[jesster2k10]

@jpanuncialman I'm not sure if Create React App works with shopify but if you could share some of your code or a repo I'd be glad to take a look at your setup

[tonchmx]

Hey guys,

I've been playing around with this thing 'cause I want to make an app for a store.

[DISCLAIMER] I'm not using slate with this test. If this way works, I'm going to try it with slate.

I've started with the traditional: npx create-react-app [appName]

After, I moved to the app folder and ran yarn build. With this build, I took the index.html and copied all the content to a new liquid template, replacing the assets URL with: "{{ '[asset_name]' | asset_url }}". Remember put the {{ content_for_header }} and {{ content_for_layout }} or the layout will be invalid. And I've uploaded all the assets to the Shopify asset folder (I don't like this process, but, is a proof of concept)

Later, I've created a new page template. In this new template, I'm using the previously created layout. And only put the {{ page.content }} tag.

On the page section of the Shopify Admin, I've created a new page, set the page template and, for the content of this new page, I've put the div where the react app will be.

In short:

1.- Build your react app yarn build

2.- Put the index.html build file in a new layout. Replacing the assets URL with the location on Shopify. Layout > theme.react.liquid for example.

3.- Upload all the assets to the Shopify asset folder

4.- Create a new page template with the new layout and put the page.content tag.

{% layout 'theme.react' %}
{{ page.content }}

5.- Create a new page. Set the new page template and put the div tag on the page. <div id="root"></div>

Actually, you can't ignore putting content on the new page and put the react div tag on the page template.

I continue playing with this and see what are the limits.

Good luck and write me if you have a doubt or a better solution.

[dave4jr]

Any update on this @tonchmx ?

[alextraill]

Does anyone know if the explanation above works? @tonchmx Did you get it to work?