Wasp•2mo ago

Project not building the frontend for production

Hey everyone, I'm building a project using another open source application as base, and it's my first contact with wasp, so I'm not too familiar with it. But basically my problem is that everything was running on my local but when I tried deploying to railway I'm only seeing a basic "Hello World" as my frontend, not my UI, and I first thought that it was a problem with Railway and was trying a hole bunch of different configurations on my Dockerfile, but nothing was working. Then I accidentally opened localhost:3001 on my browser instead of localhost:3000 and on 3001 I was seeing the same "Hello World". So digging a little more with ChatGPT localhost:3001 should also show my frontend, and I believe that my frontend for some reason is not really building. I was using wasp version 0.15.0 and upgraded to version 0.16.7 because I thought that could be it and now my localhost:3001 is just a blank screen, which I believe it's progress because now it's not the default wasp for when we don't have anything. One thing that I thought might be the problem but I'm not sure if it is or how to fix is that on the main.wasp the first ever time that I call an entity I have an error (screenshot) doesn't matter which entity, I always have an error, so my "fix" for it was creating a dummy action right on top of the main.wasp and let that be an error because it's just a dummy and is not really running anything, but I'm not sure if that fixes it or if that is my main problem at all. If anyone has any suggestions on what could be going wrong I would really appreciate it, thanks

5 Replies

kapa.ai•2mo ago

Hi @StarBit. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on your description, it sounds like your Wasp app's frontend is not being built or served correctly in production, which is why you're only seeing a "Hello World" page (the default Wasp server response when no frontend is present) on both Railway and when accessing localhost:3001. Here are some key points and troubleshooting steps based on the knowledge sources: 1. Frontend Build Process
For production, you need to explicitly build the frontend. This is done by navigating to .wasp/build/web-app and running:

   npm install && REACT_APP_API_URL=<url_to_wasp_backend> npm run build

   npm install && REACT_APP_API_URL=<url_to_wasp_backend> npm run build

Replace <url_to_wasp_backend> with the actual URL of your deployed backend. This will generate the static files for your frontend in the build/ directory, which you then deploy to your static hosting provider or serve via Railway as described in the docs. If you skip this step, the backend will serve the default "Hello World" page instead of your app UI [Deploying the Web Client (frontend)]. 2. Railway Deployment
When deploying to Railway, after building the frontend, you need to copy the build directory to dist, and set up a simple Dockerfile to serve the static files. The docs provide a script and Dockerfile example for this:

   FROM pierrezemb/gostatic
   CMD [ "-fallback", "index.html" ]
   COPY ./dist/ /srv/http/

   FROM pierrezemb/gostatic
   CMD [ "-fallback", "index.html" ]
   COPY ./dist/ /srv/http/

Make sure you follow all the steps, including setting the PORT environment variable to 8043 for the client [Deploying the Client to Railway]. 3. Accessing the App
- localhost:3000 is the frontend (React dev server in development, static files in production). - localhost:3001 is the backend (Express server). In production, this should not serve your frontend UI; if it does, it means the frontend build is missing or not correctly deployed [Accessing the configuration]. 4. Entity Error in main.wasp
If you have no entities defined, Prisma (used by Wasp for the database) can throw errors. The workaround is to define a dummy entity in your main.wasp:

   entity Dummy {=psl
     id Int @id @default(autoincrement())
   psl=}

   entity Dummy {=psl
     id Int @id @default(autoincrement())
   psl=}

This can help resolve build errors related to missing entities [Prisma error workaround]. 5. Blank Screen After Upgrade
A blank screen usually means the frontend is being served, but there is a runtime error in your React app. Check the browser console for errors, and ensure your frontend is building without errors. Summary of what to check: - Make sure you are building the frontend as described above. - Ensure the built frontend is being deployed and served correctly. - If you have no entities, add a dummy entity to avoid Prisma errors. - Check for errors in the browser console if you see a blank screen. If you follow these steps and still have issues, please provide any error messages from the build process or browser console for more targeted help. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @StarBit, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

Carlos•2mo ago

@StarBit The bot gave good advice, can you try that?

StarBitOP•2mo ago

Hi, yes I was trying a few different things and I'm still testing and making some changes, thanks for checking!

Carlos•2mo ago

please ping me if it works for you so i can mark the thread as solved (or if it doesn't so we can investigate some more)

StarBitOP•2mo ago

Sure I'll do that, thank you Hey @Carlos everything worked, thank you!

Gaming

Programming

Project not building the frontend for production

Did you find this page helpful?