npm install not being able to find a file
ProjectID: ff2c534b-823e-40f6-a709-db146cfd1f3d
trying to deploy UI part of my app, dockerfile is giving me hard time, I followed all articles about how to create Dockerfile for react app, but getting same error, => package.json cannot be found.
Folder structure : attached
Dockerfile instructions:
FROM node:19-alpine
Create a directory inside the container to copy the files
WORKDIR /app
Copy the package.json and package-lock.json first to leverage Docker cache if dependencies haven't changed
COPY package*.json ./
Install dependencies
RUN npm install
Copy the rest of the app files
COPY . .
Expose the required port
EXPOSE 5173
Start the application
CMD ["npm", "run", "dev"]
What am I doing wrong ?
Solution:Jump to solution
you are also missing your vite config file from the repo, without that react wont be integrated into the build
44 Replies
Project ID:
N/Adid add .dockerignore, on the same level, didn't help
your logs are saying it's trying to look for the package.json in /app
however it seems like you have it in root ./
Morpheus, the workdir is set to /app in the dockerfile
@cern7 is this create-react-app?
no, it is my react application I developed
does it use create-react-app
no, I used npm create vite@latest my-app --template react
ah cool vite react app
delete your dockerfile
https://github.com/brody192/vite-react-template
copy the nixpacks.toml and Caddyfile from this repo into yours
make sure you have not set any build or start commands in your services settings
should I add some other settings to the service
or any Variables ?
dont think it would be needed, those should just be drag and drop, but if theres any issues ill be here!
the vite (client) is in UI/notife-me-app-ui/
@Brody
in the service settings set the root directory to
/UI/notife-me-app-ui
no need to ping, I'm heresorry
no worries
if path doesn't exist, redirect it to 'index.html' for client side routing
try_files {path} /index.html
yes, you have a single page react app, that is necessary
do you think you could share your repo?
GitHub
GitHub - cern7/notifyMe
Contribute to cern7/notifyMe development by creating an account on GitHub.
looking
thx
can you show me this same screenshot, but of your local folder instead of github?
you have an index.html there, but not in the repo?
you re right
should have pay attention
š
do you know why it isnt in the repo?
I didn't add it š¦
It is active now
will continue testing, the back end and db
thanks a lot
the build went through and the site is live?
Solution
you are also missing your vite config file from the repo, without that react wont be integrated into the build
y right
home page is loaded
didnt even know you could run a vite build without its config file lol
thanks a lot
no problem!
how can I add variable place holder to caddyfile ?
to use it liket this
now I have:
to use environment variables in vite they need to be prefixed with
VITE_ otherwise vite won't build the variable into your app for security reasons.
in railway set a variable VITE_BACKEND_API_URL to https://${{notifyMe.RAILWAY_PUBLIC_DOMAIN}}
in your code the BASE_API const should be import.meta.env.VITE_BACKEND_API_URL + "/api/auth/login"
this is all great for when on railway, but we don't necessarily want to call the backend that's running on railway when developing locally, for that you can add a .env.local to your project with the same variable, but the value being the address of the locally running backend api VITE_BACKEND_API_URL=http://127.0.0.1:8000
that way, when developing locally, the local backend url is used automatically, giving you a seamless transition from developing locally to running on railwayHey Brody
thanks It helped
is there any setting where I can update this
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://notifyme.railway.internal/api/auth/register. (Reason: CORS request did not succeed).
that would have to be done in the code for your backend
and thats done in java, unfortunately i have zero experience with java
thank you Brody