How to render HTML in my theme via app created with React
I solved the majority of this challenge, and am so excited that I might just crack open an afternoon beer! Big thanks to @Anonymous for taking time to point me in the right direction.
I wanted to post my solution below so that anyone who happens upon this thread might be able to use my process as part of their solution. Here we go...
Where I am stuck is, how do I make a script file in my app accessible from the storefront?
I am going to use the tutorial located at https://shopify.dev/tutorials/build-a-shopify-app-with-node-and-react as a starting point for this, as many of the people who complete that tutorial are going to be left with a React app that they might not understand entirely, and that app really only is available via the admin interface. To make a script in your app available online (and thus accessible from the storefront), you need to complete the following tasks:
1. Set up an application proxy app extension
This tutorial (https://shopify.dev/tutorials/display-data-on-an-online-store-with-an-application-proxy-app-extension) does a pretty good job of explaining how to accomplish this, but it had a few sticking points that I think need to be clarified. Follow their instructions from steps 1-5 and then return here to discuss the proxy settings. Let's take a look at the (placeholder) settings that I used:
So what this does, is it takes traffic from https://my-test-store.myshopify.com/apps/my-subpath and forwards it to https://reserved-subdomain.ngrok.io/test (it is a bit more complicated than that but for now that's all that matters). In the Shopify tutorial, they mention an app_path being part of the URL, which wasn't something that I needed in this case. I imagine that if I have multiple apps on a server then it comes into play, but if you are just adding to the React App tutorial, this will work.
2. I went ahead and paid for the ability to have reserved subdomains with ngrok
That way, I don't have to update the URLs in my app settings or in the proxy each time I open a new tunnel. Not a critical part of this solution, but for like 8 bucks a month...that's an easy buy.
3. Configure routing in your app so that requests for /test are handled properly
So far we have configured our proxy so that https://my-test-store.myshopify.com/apps/my-subpath is forwarded to https://reserved-subdomain.ngrok.io/test, but the app created in the tutorial is not configured to handle a request for /test. If you followed the React tutorial to the end, then you will have koa-router installed, giving you everything you need to forward /test to a script of your choice. For this example, create a directory in the root of your app named "scripts," and in that directory, create a file named testscript.js and add the following code to that file:
async function runTestRoute (ctx, next) {
ctx.body = 'Greetings, I am test route'
};
module.exports = runTestRoute;Then, open your server.js file in the root of your app, and add the following line* (line 15 in my app)
const Router = require('koa-router');
const processPayment = require('./server/router');
+ const runTestRoute = require('./scripts/testscript');*The first two lines are already there, but were just included to give you a frame of reference for where you can add the lines, and the + is just there to denote a new line, don't actually include the + in your code, just add const runTestRoute = require('./scripts/testscript')
Then update the same server.js file with the second line here (line 31 in my app)
router.get('/', processPayment);
+ router.get('/test', runTestRoute);
If your app is already running, hit CTRL+C (or whatever the mac equivalent is if that's your bag) in your cmd/terminal window to shut down the app (assuming this is a development server and nobody is actually using it). Then enter npm run dev to fire it back up, and then run the following tests once it says it is ready on 3000:
Visit your ngrok URL. In this example it is https://reserved-subdomain.ngrok.io/test
You should see "Greetings, I am test route" displayed on your screen. If not, then you might have made a mistake in part 3 of this answer.
If the previous test works, visit your proxy URL. In this example that is https://my-test-store.myshopify.com/apps/my-subpath
You should see "Greetings, I am test route" displayed on your screen. If not, then you might have made a mistake in part 1 of this answer.
Note that anytime you make changes to your server.js file, you have to restart the server to view the updated app in a browser. There is supposedly a way around that via nodemon but I don't have any experience with that.
Hopefully this helps to bail someone out who gets stuck in the same spot I did. If you have any feedback or would like to suggest an edit to this answer please feel free to comment below. I am not yet an expert in Node development or Shopify development, so please feel free to make suggestions or recommendations!
Cheers
