Can't get react app created with Shopify CLI to run locally

Retired Boards Appdev Tools
1

For reference, here is the file structure of the app:

project
│   README.md
│   shopify.app.toml
|   Dockerfile
|   heroku.yml
|   package.json
|   package-lock.json 
│
└───web
│   │   index.js
│   │   vite.config.js
│   │   package.json
│   │   package-lock.json
│   │   shopify.web.toml
│   │
│   └───frontend (changed to public as a test)
│       │   App.jsx
│       │   index.html
│       │   index.jsx
│       │   package.json
│       │   package-lock.json
│       │   shopify.web.toml
│       │   vite.config.js
│       └─── components
│       └─── pages
|            | index.jsx (home page)
│       └─── public
│       └─── static
│       └─── styles
│       └─── assets
│   
|   └─── helpers
|   └─── middleware

I am trying to get my Shopify app to work on Heroku. I used the CLI which gives you a predefined file structure and includes specific files for functions etc. I’ve been using the script “shopify app dev” to run the app, but you cannot run the CLI commands in Heroku. Therefore, I need a way to run it locally with npm start. If I point to the App.jsx file using “node ./web/frontend/App.jsx”, I get an error:

Unknown file extension “.jsx”

I installed Babel but did not add any configurations (I was comparing to a regular react app created with npx create-react-app my-app).

If I use react-scripts, it needs a public folder. I changed the “frontend” folder to be named as “public” and changed all instances in the app where it used “frontend” as a folder name. The command I used to utilize react-scripts is:

cd web && react-scripts start

In which I get a different error: Could not find a required file. Name: index.js Searched in:

C:\Users\username\Documents\dev\my-app\web\src

Which means now I need a src file that contains index.js, however, the file structure has the index.js in the same directory as index.html.

I’m trying not to eject the app but I feel like that may be the option I have to go with. I just feel it is likely Shopify made the app to where it can run locally (our of the box) and perhaps I am missing something. Please help and thank you in advance!

1 Like
2

After much troubleshooting, I finally was able to get the app create from the new Shopify CLI to run on a Heroku server (this was the initial intent of getting it to run locally). I will post the process in case anybody else runs into the same issue.

Instead of creating a Docker container per the instructions in the Heroku.md file, I made a Heroku app based on the Heroku documentation. The steps goes as follows:

Step 1: Create the Heroku App
cd into the app/project folder (this would be the web folder for the template)
git init
heroku git:remote -a myheroku-app-name

git add .
git commit -am “initialize app”
git push heroku master

Note: Make sure you are only pushing the web folder and not the app in its entirety.

Note: My first time around this did not work because I had already created a container in Heroku for the Docker image. This will onlly work in a Heroku application, not a container.

Step 2: Setup the package.json scripts in the web directory
“start”:“npm run serve”
“heroku-postbuild”: “cd frontend && npm install && npm run build”
“serve”: “cross-env NODE_ENV=production node -r dotenv/config index.js”

Step 3: Update variables (if applicable)
My app had these variables set as follows:
const DEV_INDEX_PATH = ${process.cwd()}/public/;
const PROD__INDEX_PATH = ${process.cwd()}/public/dist/;

The actual values need to be:
const DEV_INDEX_PATH = ${process.cwd()}/frontend/;
const PROD_INDEX_PATH = ${process.cwd()}/frontend/dist/;

Step 4: Allow Heroku to configure PORT
In my package.json I deleted
“engines”: {
“node”: “>=16.13.0”
}
from both the web directory and the frontend directory after getting this error:
https://github.com/keystonejs/keystone-classic/issues/3994

You also need to change the PORT variable in app.listen(PORT) to app.listen(process.env.PORT) since Heroku dynamically creates the PORT. Do not put in a PORT value in your config vars.

Of course, this is all in addition to setting your environmental variables in Heroku i.e. HOST, SCOPES, SHOPIFY_API_KEY, SHOPIFY_API_SERET. You may also need to npm i cross-env and dotenv.