Wasp-lang•2mo ago

Go-live issue

Hello everyone, iI'm trying to go in PROD with my wasp/nodejs/react/flask/postgreSQL web application with Digital Ocean but in my site datanext.app i see just the favicon and the tab description, but all the page was completely blank. Please see my step bellow: 1) Download Docker 2) Download postgreSQL 3) creation of user and database: postgresql://USER:PASS@localhost:5432/DBNAME 4) Go in /var/www/app and run wasp build 5) Go in /var/www/app/.wasp/build/server and run npm install and npm run bundle 6) managing of env variable by installing PM2 and creatinf in /var/www/app the file ecosystem.config.js with:

module.exports = {
  apps: [
    {
      name: 'datanext-app',
      script: 'bundle/server.js',
      cwd: '/var/www/app/.wasp/build/server',
      instances: 1,
      autorestart: true,
      watch: false,
      max_memory_restart: '1G',
      env: {
        NODE_ENV: 'production',
        PORT: '3001',
        DATABASE_URL: 'postgresql://USER:PASS@localhost:5432/DBNAME',
        WASP_WEB_CLIENT_URL: 'https://datanext.app',
        WASP_SERVER_URL: 'https://datanext.app',
        STRIPE_KEY: '...,
    
      }
    }

module.exports = {
  apps: [
    {
      name: 'datanext-app',
      script: 'bundle/server.js',
      cwd: '/var/www/app/.wasp/build/server',
      instances: 1,
      autorestart: true,
      watch: false,
      max_memory_restart: '1G',
      env: {
        NODE_ENV: 'production',
        PORT: '3001',
        DATABASE_URL: 'postgresql://USER:PASS@localhost:5432/DBNAME',
        WASP_WEB_CLIENT_URL: 'https://datanext.app',
        WASP_SERVER_URL: 'https://datanext.app',
        STRIPE_KEY: '...,
    
      }
    }

7) Go in var/www/app/.wasp/build/server and run

export DATABASE_URL=postgresql://USER:PASS@localhost:5432/DBNAME and run npx prisma migrate deploy --schema=/var/www/app/.wasp/build/db/schema.prisma

8) Go in /var/www/app/.wasp/build/web-app and run REACT_APP_API_URL=https://datanext.app/api npm run build 9) Setup ngix with sudo nano /etc/nginx/sites-available/default But enything is not working... Please I'm working on this project from more than 6 month and I'm trying to go in prod from 1 week but I failed. Could please someone help me?

9 Replies

kapa.ai•2mo ago

Hi @DanjelDurmo. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I'm sorry to hear that you're having trouble deploying your Wasp application. Based on the steps you've provided, it seems like you've followed a correct process. However, without specific error messages or logs, it's hard to pinpoint exactly what might be going wrong. Here are a few things you could check: 1. Environment Variables: Make sure that all your environment variables are correctly set. In particular, the DATABASE_URL should be correctly pointing to your PostgreSQL database. You mentioned an issue in one of the knowledge sources about a DATABASE_URL error being printed when building Wasp, which might be related (source (https://github.com/wasp-lang/wasp/issues/1321)). 2. Database Setup: Ensure that your PostgreSQL database is correctly set up and accessible. You might need to migrate from SQLite to PostgreSQL for production, as mentioned in the Wasp documentation (source (https://wasp-lang.dev/docs/data-model/backends#migrating-from-sqlite-to-postgresql)). 3. Server and Client Build: Make sure that the server and client are correctly built. You mentioned running wasp build, npm install, and npm run bundle in the server directory, and npm run build in the web-app directory. Ensure that these commands completed without errors. 4. Nginx Setup: Check your Nginx configuration. Ensure that it's correctly set up to serve your Wasp application. 5. Logs: Check the logs for any error messages. These could provide clues as to what might be going wrong. If you're still having trouble, I would recommend reaching out to the Wasp community on their Discord server or GitHub for more specific help. They might be able to provide more detailed guidance based on your specific situation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @DanjelDurmo, 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?

miho•2mo ago

We have these instructions on how to host Wasp on a VPS with Docker: https://gist.github.com/infomiho/80f3f50346566e39db56c5e57fefa1fe To help you, we need to know which kind of errors messages are you seeing.

datanext.app i see just the favicon and the tab description, but all the page was completely blank.

Did you open the browser console to see if there are any errors? Also, did you check your server error logs to see if there are any errors?

Setup ngix with sudo nano /etc/nginx/sites-available/default

Can you share your nginx config, I suspect the routing is not working as expected and the SPA is not being served properly.

Gist

Deploy Wasp to a VPS (reverse proxy + Docker)

Deploy Wasp to a VPS (reverse proxy + Docker). GitHub Gist: instantly share code, notes, and snippets.

DanjelDurmoOP•2mo ago

Hello @miho, thank you for the guide provided. I have followed exactly the configuration and know in datanext.app i have deployed. But the design of the page looks extremaly different from localhost. It is any chance to check the reason? Please see the foto bellow

DanjelDurmoOP•2mo ago

This is in localhost (all corret)

DanjelDurmoOP•2mo ago

This is in datanext.app (deployed app). Something is not working for layout

miho•2mo ago

How are you importing CSS? Are you using Tailwind? Do you see in errors in the browser console? Maybe your Nginx/reverse proxy is not serving CSS correctly?

DanjelDurmoOP•2mo ago

No I'm not using Tailwind because I'm not familiar with it. Instead, I have imported css in the AppNavBarLanding in this way:

useEffect(() => {
    const loadResources = async () => {
      await import('../assets/loremipsum.css');
      ... OTHER ...
      setIsPageLoaded(true);
      JavaScriptLanding();
    };

    loadResources();
  }, []);

useEffect(() => {
    const loadResources = async () => {
      await import('../assets/loremipsum.css');
      ... OTHER ...
      setIsPageLoaded(true);
      JavaScriptLanding();
    };

    loadResources();
  }, []);

And this are used for the landing page and for other page of the site, but for the real web application (after login) i have imported other css because the layout is different, and from AppNavBar i have imported:

useEffect(() => {
    const loadStyles = async () => {
      await import('../assets/css/styles.css');
      await import('./Main.css');
    };

    loadStyles();
  });

useEffect(() => {
    const loadStyles = async () => {
      await import('../assets/css/styles.css');
      await import('./Main.css');
    };

    loadStyles();
  });

So, this in dev work fine and I obtain the expected result, but in PROD not and i don't see any error. But I managed to replicate this wrong behavior also in localhost and to obtain the wrong template (as PROD) I should put in the import the code like

import '../assets/loremipsum.css'

import '../assets/loremipsum.css'

So, a duplicate import break completely the layout, but why in PROD i have this duplication of import css. Any way to avoid this? Many thanks for your support If I removed from /.wasp/build/web-app/build/index.html the line <link rel="stylesheet" crossorigin href="/assets/index-wmKWraEg.css"> the layout of landigpage looks fine but the dashboard layout broken I think I figured out the problem. In my code, I load two different css dynamically based on whether the page is classified as "landing page" or not. I do this because there are classes that conflict. However, in the build procedure the only css that it generates is not loaded dynamically and therefore becomes global and interferes with my landing page code. Is there a way to work around this problem with the wasp build @miho ?

martinsos•2mo ago

Auf loading css dinaymically, yeah that sonuds problematic, I am assuming due to how Vite might handle that while bundling this for the build. The question is really how does Vite handle this, and you could research this and then configure it as needed. However, this direction with dynamic CSS really doesn't sound like something you should be doing. Instead, yo ushould be statically importing whatever CSS you need, and then use classes to make sure correct CSS is applied in right places. It doesn't matter if too much of it is loaded. Or, you can use one of the CSS-in-JS solutiosn for a bit more modular approach, that might be closer to what you seem to be trying to achieve.

DanjelDurmoOP•2mo ago

Thanks Martinsos for the advice. I would like to avoid to find and rewrite all the class names because it would be a very time consuming activity. I think I will move in the direction of looking for a solution via Vite or CSS-in-JS. But I thought that the build should handle these situations. Thank you and best regards

Gaming

Programming

Go-live issue