Error: ENOENT: no such file or directory, open 'react-ui/build/index.html'

[macmartine]

Really excited about this start app, but... I've tried this twice, following the instructions. When I go to my ngrok URL, I get this error:

Error: ENOENT: no such file or directory, open 'react-ui/build/index.html'

I see the other open ticket that starts off with this error, but then the threads moves to other topics. I've tried everything the other person mentions (creating new app, clearing cache, etc)

Also, I don't have a 'react-ui/build' directory. So I tried changing the path on line 107 in app.js to '../react-ui/public/index.html' instead, but that just created another error.

What am I missing?

[airmiha]

Hey @macmartine,

This happens when the request hits a route that doesn't exist. But, the underlying reason is that something is missing in the configuration. There are several candidates:

1. To what port is ngrok listening to? Is it 3000?

2. Did you put your shop name and API KEY in the .env file in the react-ui folder?

   REACT_APP_SHOPIFY_API_KEY=your API key
   REACT_APP_SHOP_ORIGIN=your-development-store.myshopify.com

3. What value did you set for APP_URL? Is it something like https://ngrokdomain/home

If everything above is alright, could you paste me the log?

This is the most common issue that people are encountering. I'll write down a list of potential reasons in the FAQ.

[macmartine]

Thanks for the quick response.

1. It was listening on port 3001, as that's the default port in this project. But for kicks I tried changing it, but had the same issue.

2. Yes, and I've confirmed everything is right in both .env files about 10 times.

3. export const APP_URL = 'https://xxx7bd70.ngrok.io/home

No idea what changed, but now when I go to the ngrok url it just redirects me to the app page such as: https://apps.shopify.com/app-name

Here's the log:

➜  create-shopify-app git:(master) ✗ npm run start:dev

> create-shopify-app@0.0.1 start:dev /Users/macmartine/gd/Development/projects/create-shopify-app
> concurrently "npm run server:dev" "cd react-ui/ && npm start"

[0]
[0] > create-shopify-app@0.0.1 server:dev /Users/un/gd/Development/projects/create-shopify-app
[0] > cross-env NODE_ENV=development nodemon
[0]
[1]
[1] > client@0.1.0 start /Users/un/gd/Development/projects/create-shopify-app/react-ui
[1] > react-scripts start
[1]
[1] sh: react-scripts: command not found
[1] npm ERR! file sh
[1] npm ERR! code ELIFECYCLE
[1] npm ERR! errno ENOENT
[1] npm ERR! syscall spawn
[1] npm ERR! client@0.1.0 start: `react-scripts start`
[1] npm ERR! spawn ENOENT
[1] npm ERR!
npm ERR! Failed at the client@0.1.0 start script.
[1] npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
[1] cd react-ui/ && npm start exited with code 1
[0] [nodemon] 1.11.0
[0] [nodemon] to restart at any time, enter `rs`
[0] [nodemon] watching: /Users/un/gd/Development/projects/create-shopify-app/server/**/* webpack.config.js .env
[0] [nodemon] starting `npm run build:dev && node compiled/server.dev.js`
[0]
[0] > create-shopify-app@0.0.1 build:dev /Users/un/gd/Development/projects/create-shopify-app
[0] > cross-env NODE_ENV=development npm run webpack
[0]
[0]
[0] > create-shopify-app@0.0.1 webpack /Users/un/gd/Development/projects/create-shopify-app
[0] > webpack --colors --display-error-details --config ./webpack.config.js
[0]
[0] Hash: 09ca75a8d24113d68dd2
[0] Version: webpack 3.9.1
[0] Time: 851ms
[0]             Asset     Size  Chunks             Chunk Names
[0]     server.dev.js  27.4 kB       0  [emitted]  server
[0] server.dev.js.map  39.5 kB       0  [emitted]  server
[0]    [0] ./server/config/index.js 1.1 kB {0} [built]
[0]    [4] ./server/db/index.js 621 bytes {0} [built]
[0]    [5] ./server/db/models/index.js 1.13 kB {0} [built]
[0]    [6] ./server/server.js 1.69 kB {0} [built]
[0]    [8] ./server/app.js 5.01 kB {0} [built]
[0]   [19] ./server/db/connect.js 572 bytes {0} [built]
[0]   [21] ./server/db/sequelize_config.json 463 bytes {0} [built]
[0]   [22] ./server/db/models/shop.js 462 bytes {0} [built]
[0]   [23] ./server/db/session.js 835 bytes {0} [built]
[0]   [25] ./server/routes/shopify.js 10 kB {0} [built]
[0]     + 21 hidden modules
[0] Mon, 04 Dec 2017 18:02:17 GMT sequelize deprecated String based operators are now deprecated. Please use Symbol based operators for better security, read more at http://docs.sequelizejs.com/manual/tutorial/querying.html#operators at node_modules/sequelize/lib/sequelize.js:236:13
[0] --------------------------
[0] ===> 😊  Starting Server . . .
[0] ===>  Environment: development
[0] ===>  Listening on port: 3001
[0] --------------------------
[0] Listening on port 3001
[0] ===> 😊  Connected to Redis Server on redis://:@127.0.0.1:6379. . .
[0] node_redis: Warning: Redis server does not require a password, but a password was supplied.
[0] Executing (default): SELECT 1+1 AS result
[0] info: Connection has been established successfully.
[0] info: Checking for valid session: undefined
[0] info: Authenticating shop undefined
[0] GET /home 302 14.133 ms - 132

[0] info: Checking for valid session: undefined
[0] info: Authenticating shop undefined
[0] GET / 302 3.754 ms - 132
[0] info: Checking for valid session: undefined
[0] info: Authenticating shop undefined
[0] GET / 302 2.197 ms - 132

[airmiha]

It seems like you're missingreact-scripts:

sh: react-scripts: command not found
[1] npm ERR! file sh
[1] npm ERR! code ELIFECYCLE
[1] npm ERR! errno ENOENT
[1] npm ERR! syscall spawn
[1] npm ERR! client@0.1.0 start: `react-scripts start` 

Did you run npm install in the react-ui folder?

ngrok should be pointing to port 3000. This is the default for create-react-app. The Node server listens on port 3001 and create-react-app proxies all API requests to it.

[macmartine]

Ah, I had noticed that but didn't realize that was the clue I was looking for.

I had run npm install in there a few times but it for some reason still wasn't installing react-scripts. I finally got that message to go away by explicitly running 'npm install react-scripts' in the react-ui directory.

I'm also now running ngrok on 3000 again.

I'm significantly closer, though now when i go to https://{my-ngrok}.ngrok.io it has me sign in to Shopify, then redirects me to the apps page and says 'The page you’re looking for could not be found'.

Here's the log now:

➜  create-shopify-app git:(master) ✗ npm run start:dev

> create-shopify-app@0.0.1 start:dev /Users/un/gd/Development/projects/create-shopify-app
> concurrently "npm run server:dev" "cd react-ui/ && npm start"

[1]
[1] > client@0.1.0 start /Users/un/gd/Development/projects/create-shopify-app/react-ui
[1] > react-scripts start
[1]
[0]
[0] > create-shopify-app@0.0.1 server:dev /Users/un/gd/Development/projects/create-shopify-app
[0] > cross-env NODE_ENV=development nodemon
[0]
[0] [nodemon] 1.11.0
[0] [nodemon] to restart at any time, enter `rs`
[0] [nodemon] watching: /Users/un/gd/Development/projects/create-shopify-app/server/**/* webpack.config.js .env
[0] [nodemon] starting `npm run build:dev && node compiled/server.dev.js`
[0]
[0] > create-shopify-app@0.0.1 build:dev /Users/un/gd/Development/projects/create-shopify-app
[0] > cross-env NODE_ENV=development npm run webpack
[0]
[0]
[0] > create-shopify-app@0.0.1 webpack /Users/un/gd/Development/projects/create-shopify-app
[0] > webpack --colors --display-error-details --config ./webpack.config.js
[0]
[1] [HPM] Proxy created: function (pathname) {
[1]         return mayProxy(pathname) && pathname.match(context);
[1]       }  ->  http://localhost:3001
[1] Starting the development server...
[1]
[0] Hash: 98d8c3d3061472ab10c7
[0] Version: webpack 3.9.1
[0] Time: 1726ms
[0]             Asset     Size  Chunks             Chunk Names
[0]     server.dev.js  27.4 kB       0  [emitted]  server
[0] server.dev.js.map  39.5 kB       0  [emitted]  server
[0]    [0] ./server/config/index.js 1.1 kB {0} [built]
[0]    [4] ./server/db/index.js 621 bytes {0} [built]
[0]    [5] ./server/db/models/index.js 1.13 kB {0} [built]
[0]    [6] ./server/server.js 1.69 kB {0} [built]
[0]    [8] ./server/app.js 5.01 kB {0} [built]
[0]   [19] ./server/db/connect.js 572 bytes {0} [built]
[0]   [21] ./server/db/sequelize_config.json 463 bytes {0} [built]
[0]   [22] ./server/db/models/shop.js 462 bytes {0} [built]
[0]   [23] ./server/db/session.js 835 bytes {0} [built]
[0]   [25] ./server/routes/shopify.js 10 kB {0} [built]
[0]     + 21 hidden modules
[0] Mon, 04 Dec 2017 18:33:20 GMT sequelize deprecated String based operators are now deprecated. Please use Symbol based operators for better security, read more at http://docs.sequelizejs.com/manual/tutorial/querying.html#operators at node_modules/sequelize/lib/sequelize.js:236:13
[0] --------------------------
[0] ===> 😊  Starting Server . . .
[0] ===>  Environment: development
[0] ===>  Listening on port: 3001
[0] --------------------------
[0] Listening on port 3001
[0] ===> 😊  Connected to Redis Server on redis://:@127.0.0.1:6379. . .
[0] node_redis: Warning: Redis server does not require a password, but a password was supplied.
[0] Executing (default): SELECT 1+1 AS result
[0] info: Connection has been established successfully.
[1] Compiled successfully!
[1]
[1] You can now view client in the browser.
[1]
[1]   Local:            http://localhost:3000/
[1]   On Your Network:  http://192.168.0.36:3000/
[1]
[1] Note that the development build is not optimized.
[1] To create a production build, use npm run build.
[1]
[0] info: Checking for valid session: undefined
[0] info: Authenticating shop undefined
[0] GET /api/products 302 15.267 ms - 66
[0] info: Checking for valid session: undefined
[0] info: Authenticating shop undefined
[0] GET /home 302 2.307 ms - 132
[0] info: Checking for valid session: undefined
[0] info: Authenticating shop undefined
[0] GET /api/products 302 1.003 ms - 66

Thanks so much for the help, close!

[airmiha]

Install the app through Shopify first, from the "Get" link on the app listing page. Something like this:

https://apps.shopify.com/login?id=mihovil-test-app

Replace my app name with yours.

[macmartine]

Ah, I see. May want to update the README: As the mentioned section isn't found on the page inked to. "Open Shopify's documentation. Scroll down to the Install your app on a test store section."

I had to remove 'home' from APP_URL = 'https://62a15f42.ngrok.io/home' to get the callback to work. Otherwise I was getting 'The redirect_uri is not whitelisted. The redirect_uri was getting set to https://xxx.ngrok.io/home/auth/callback

Now I get through the auth process and test charge, but then "The page you’re looking for could not be found" again. :(

[airmiha]

Yes, I need to put to this in the README, with a FAQ.

We're very close now.

The APP_URL should be https://62a15f42.ngrok.io/home', and the redirect_uri https://xxx.ngrok.io/auth/callback. That's alright now.

Can you see the app in Shopify admin? What happens when you access it? What do the logs say?

[macmartine]

Ah, got it! The missing piece was that I didn't set APP_NAME to exactly match the path used by the app listing after I generated that.

Thanks so much for the help and fast replies!

[airmiha]

I'm happy you got it working now. Here at your service ;).