How do I hook up my frontend correctly./

I am able to deploy my backend but my frontend is not working yet.

Error:

#8 [4/5] RUN  npm run build

 

#8 0.318 /bin/bash: line 1: npm: command not found

#8 ERROR: process "/bin/bash -ol pipefail -c npm run build" did not complete successfully: exit code: 127

-----

> [4/5] RUN  npm run build:

0.318 /bin/bash: line 1: npm: command not found

-----

 

Dockerfile:15

-------------------

13 |     # build phase

14 |     COPY . /app/.

15 | >>> RUN  npm run build

16 |

17 |

-------------------

ERROR: failed to solve: process "/bin/bash -ol pipefail -c npm run build" did not complete successfully: exit code: 127

 

Error: Docker build failed

3b4c3c14-6b11-4e8a-8f52-bb11ff2f2554
repo: https://github.com/hannarosenfeld/vault-manager

refresh me please, screenshot of your railway project?

do you have the root directory set to /frontend?

and if you have any build or start commands set in the service settings, please clear them

yes
sorry i just saw i didn't it must have not saved. set it to /frontend now
cleared build / start commands

please copy the Caddyfile and nixpacks.toml files from this repo https://github.com/brody192/create-react-app-starter into your frontend folder

ok done and pushed. redeploying now

#19 ERROR: process "/bin/bash -ol pipefail -c npm run build" did not complete successfully: exit code: 1

-----

> [stage-0 12/15] RUN --mount=type=cache,id=s/fbd4d67e-9585-4de6-87a7-920ec77582e8-node_modules/cache,target=/app/node_modules/.cache npm run build:

14.21   Line 4:3:   'BrowserRouter' is defined but never used                                                                    no-unused-vars

14.21   Line 7:3:   'Navigate' is defined but never used                                                                         no-unused-vars

14.21   Line 15:8:  'Navigation' is defined but never used                                                                       no-unused-vars

14.21   Line 31:6:  React Hook useEffect has a missing dependency: 'isLoaded'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

14.21   Line 33:9:  'sessionUser' is assigned a value but never used                                                             no-unused-vars

14.21

14.21 src/store/index.js

14.21   Line 5:8:  'logger' is defined but never used  no-unused-vars

14.21

14.21

-----

 

Dockerfile:30

-------------------

28 |     # build phase

29 |     COPY . /app/.

30 | >>> RUN --mount=type=cache,id=s/fbd4d67e-9585-4de6-87a7-920ec77582e8-node_modules/cache,target=/app/node_modules/.cache npm run build

31 |

32 |     # fmt phase

-------------------

ERROR: failed to solve: process "/bin/bash -ol pipefail -c npm run build" did not complete successfully: exit code: 1

 

Error: Docker build failed

you have a bunch of warnings and they are being treated as errors, you have two options, fix the warnings, or ignore the warnings and fix them later

I'll fix them later, they are referencing things I will use later

gotcha, set a service variable CI = false

done, getting this error now:

#18 ERROR: process "/bin/bash -ol pipefail -c npm run build" did not complete successfully: exit code: 1

-----

> [stage-0 12/15] RUN --mount=type=cache,id=s/fbd4d67e-9585-4de6-87a7-920ec77582e8-node_modules/cache,target=/app/node_modules/.cache npm run build:

18.68   Line 4:3:   'BrowserRouter' is defined but never used                                                                    no-unused-vars

18.68   Line 7:3:   'Navigate' is defined but never used                                                                         no-unused-vars

18.68   Line 15:8:  'Navigation' is defined but never used                                                                       no-unused-vars

18.68   Line 31:6:  React Hook useEffect has a missing dependency: 'isLoaded'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

18.68   Line 33:9:  'sessionUser' is assigned a value but never used                                                             no-unused-vars

18.68

18.68 src/store/index.js

18.68   Line 5:8:  'logger' is defined but never used  no-unused-vars

18.68

18.68

-----

 

Dockerfile:30

-------------------

28 |     # build phase

29 |     COPY . /app/.

30 | >>> RUN --mount=type=cache,id=s/fbd4d67e-9585-4de6-87a7-920ec77582e8-node_modules/cache,target=/app/node_modules/.cache npm run build

31 |

32 |     # fmt phase

-------------------

ERROR: failed to solve: process "/bin/bash -ol pipefail -c npm run build" did not complete successfully: exit code: 1

 

Error: Docker build failed

uhhhh
redeploy?

ok doing that now
exact same error after rebuild : /

can i see the full build logs, use this https://bookmarklet.up.railway.app/log-downloader/

that's pretty cool

thank you 🙂

use this in your frontend instead?

ok done and redeploying now

what was the removal of BrowserRouter for?

I wasn't gonna use that one
It worked! Do I need to somehow connected my backend and frontend or are they connected now?

your frontend will need to know the domain to call for api requests, you can add this as a variable to the frontend service like so
REACT_API_URL = https://${{RAILWAY_SERVICE_VAULT_MANAGER_BACKEND_URL}}
i think i spelt that correctly
i did the same type of thing here as a demo, this would be how that variable would look when in code https://utilities.up.railway.app/env-vars?prefix=REACT_

thank you!! much appreciated
would i use the domain for the front or backend service ?
when i want to visit my site

youd need both services to have domains
but you would visit your site from the frontend domain
then your frontend would call your backend via the value from the REACT_API_URL environment variable

awesome thank you!

no problem, if you have any more questions, feel free to ask