Running the App in the Browser

[J2Macwilliams]

So far-
Forked and cloned the App. Set it up through zsh terminal. Went into VS Code.
Tried running Yarn on the project. Yarn lock existed. SO eventually deleted lock. Then ran Yarn again. Got node modules and new yarn lock. Then Yarn app. Received Localhost:1234 running. Nothing showed on browser. cd into client and tried tried again on new port. still nothing. Either I'm doing something wrong. I'm studying the follow along, file structure looks right. Hmm Help

[nvdai2401]

I faced with same your problem. I solved it by cloning the codes from client branch. But the server is not work, I'm trying to find why

[nvdai2401]

I have just solved the problem in which the server does not work by using code in solution branch.

[DermotBoyle]

I had this issue too. When Scott says make sure you are in client branch before running the project he is referring to the git branch and not the project folder. When you run these videos on a faster speed like I do its easy to miss something like that. For me a simple git checkout client (check the VSCODE UI bottom left has changed or a git branch to see if it was correctly changed over)

[kaboumk]

I'm facing the exact same problem even if i'm on the client branch... white browser window.
I'll try to clone (i forked)

I tried: same issue... :/

[prnvbirajdar]

@kaboumk Same issue here. Tried almost everything, including installing via npm and yarn, and being on the client branch. Still not working.

[prnvbirajdar]

It worked!! Go to the client branch, before you install any dependencies.

[karansinghnegi]

I am facing the same issue,
I checked out to client branch first, then ran command npm install
after that, I ran npm run app
But I am geeting error, Someone help
The error is as follows -

[email protected] app /home/lonewolf/Desktop/fullstack-graphql
parcel client/index.html --out-dir client/dist

Server running at http://localhost:1234
🚨 /home/lonewolf/Desktop/fullstack-graphql/client/src/index.js: Invalid Version: undefined
at new SemVer (/home/lonewolf/Desktop/fullstack-graphql/node_modules/@babel/preset-env/node_modules/semver/semver.js:314:11)
at compare (/home/lonewolf/Desktop/fullstack-graphql/node_modules/@babel/preset-env/node_modules/semver/semver.js:647:10)
at lt (/home/lonewolf/Desktop/fullstack-graphql/node_modules/@babel/preset-env/node_modules/semver/semver.js:688:10)
at /home/lonewolf/Desktop/fullstack-graphql/node_modules/@babel/preset-env/lib/index.js:274:22
at Object.default (/home/lonewolf/Desktop/fullstack-graphql/node_modules/@babel/helper-plugin-utils/lib/index.js:22:12)
at getEnvPlugins (/home/lonewolf/Desktop/fullstack-graphql/node_modules/parcel/src/transforms/babel/env.js:62:34)
at getEnvConfig (/home/lonewolf/Desktop/fullstack-graphql/node_modules/parcel/src/transforms/babel/env.js:12:25)
at async getBabelConfig (/home/lonewolf/Desktop/fullstack-graphql/node_modules/parcel/src/transforms/babel/config.js:32:19)
at async babelTransform (/home/lonewolf/Desktop/fullstack-graphql/node_modules/parcel/src/transforms/babel/transform.js:6:16)
at async JSAsset.pretransform (/home/lonewolf/Desktop/fullstack-graphql/node_modules/parcel/src/assets/JSAsset.js:83:5)

[karansinghnegi]

If you are facing the problem like me , I have solved my problem with this:
Kinldy update your package.json file as mine below, After that I was able to successfully run the client build

{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"@apollo/react-hooks": "^3.1.2",
"apollo-cache-inmemory": "^1.6.3",
"apollo-client": "^2.6.4",
"apollo-link": "^1.2.13",
"apollo-link-context": "^1.0.19",
"apollo-link-http": "^1.5.16",
"apollo-server": "^2.9.6",
"babel-plugin-emotion": "^10.0.21",
"flexboxgrid": "^6.3.1",
"graphql": "^14.5.8",
"graphql-tag": "^2.10.1",
"json5": "^2.1.0",
"lowdb": "^1.0.0",
"nanoid": "^2.1.1",
"react": "^16.10.1",
"react-dom": "^16.10.1",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
"react-select": "^3.0.8",
"react-spinners": "^0.6.1"
},
"scripts": {
"server": "node api/src/server.js",
"app": "parcel client/index.html",
"test-server": "jest api/tests"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@babel/core": "^7.14.0",
"@babel/preset-react": "^7.13.13",
"@playlyfe/gql": "^2.6.2",
"@types/react": "^16.14.6",
"babel-core": "^6.26.3",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"jest": "^24.9.0",
"parcel": "^2.0.0-beta.2"
}
}

[williamrjribeiro]

If you are on video https://frontendmasters.com/courses/client-graphql-react/apollo-client-api-querying/, then you'll need to run these commands from your terminal:

git checkout origin/client
yarn
yarn app

Then open the browser on http://localhost:1234/ and get coding.

[SimonPringleWallace]

@williamrjribeiro's solution didn't quite work for me, I had to add a npm install - otherwise I got errors from yarn about not being able to locate a bindings file.

git checkout origin/client
yarn
npm install
yarn app

[auesugui]

I tried various things but the one that worked for me was:

Start from a fresh origin/client
npm i -D [email protected]
npm i
npm run app

[NikolovS]

I am currently working on windows. I was using node v.18 and when I tried to run 'npm i' there was an error with Python. 'npm ERR! gyp ERR! find Python' . The solution was to install python according the documentation and run npm install again. After that everything works fine. Also saw link https://nodejs.org/en/docs/meta/topics/dependencies/ . In gyp section there is python dependency.. Good luck

[jalexakos]

@williamrjribeiro's solution didn't quite work for me, I had to add a npm install - otherwise I got errors from yarn about not being able to locate a bindings file.

git checkout origin/client
yarn
npm install
yarn app

@SimonPringleWallace your solution worked for me, thanks for posting it!