laraveldockerdocker-composeself-hostinginvoice-ninja

Running self-hosted Invoice Ninja on Ubuntu – white screen after account creation

I'm trying to set up a self-hosted Invoice Ninja instance on Ubuntu using Docker. I cloned both dockerfiles/debian and invoiceninja the repository and structured my files as follows:

invoiceninja/nginx  
invoiceninja/php  
invoiceninja/scripts  
invoiceninja/supervisor  
invoiceninja/Dockerfile  
invoiceninja/docker-compose.yml  
invoiceninja/app  
invoiceninja/bootstrap  
invoiceninja/config  
invoiceninja/database  
// Other Invoice Ninja files and folders

I made modifications to docker-compose.yml, Dockerfile, and nginx/laravel.conf as needed. The build completes successfully, but after creating an account, the application shows a white screen (as seen in this video).

Here is what I modified:

Dockerfile

# Copy local Invoice Ninja code
COPY . /var/www/html

# PHP modules (ensure these include all required extensions)
ARG php_require="bcmath gd mbstring pdo_mysql zip"
ARG php_suggest="exif imagick intl pcntl soap saxon-12.5.0"
ARG php_extra="opcache"

# Install system dependencies
RUN apt-get update && apt-get install -y --no-install-recommends \
    mariadb-client \
    gpg \
    supervisor \
    fonts-noto-cjk-extra \
    fonts-wqy-microhei \
    fonts-wqy-zenhei \
    xfonts-wqy \
    && apt-get clean \
    && rm -rf /var/lib/apt/lists/*

# Install PHP extensions (this includes zip, bcmath, gd)
COPY --from=ghcr.io/mlocati/php-extension-installer /usr/bin/install-php-extensions /usr/local/bin/

RUN install-php-extensions \
    ${php_require} \
    ${php_suggest} \
    ${php_extra}

# Install Composer
COPY --from=composer:latest /usr/bin/composer /usr/bin/composer

# Install dependencies
RUN composer install --no-dev --prefer-dist --optimize-autoloader

# Create symlink for frontend
RUN ln -s /var/www/html/resources/views/react/index.blade.php /var/www/html/public/index.html \
    && php artisan storage:link \
    && mv /var/www/html/public /tmp/public

USER www-data

docker-compose.yml file

services:
  app:
    build:
      context: .  # Use local files instead of pulling from a remote image
    restart: unless-stopped
    env_file:
      - ./.env
    volumes:
      - .:/var/www/html
      - app_cache:/var/www/html/bootstrap/cache
      - app_public:/var/www/html/public
      - app_storage:/var/www/html/storage

laravel.conf

location ~ \.php$ {
    fastcgi_pass invoiceninja-app-1:9000;
    fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
    include fastcgi_params;
}

.env file

DB_HOST="invoiceninja-mysql-1"
DB_DATABASE="ninja"
DB_USERNAME="ninja"
DB_PASSWORD="ninja"
DB_PORT="3306"
MYSQL_ROOT_PASSWORD="root"

Here’s the link to the compressed file: Google Drive Link. Simply extract it and run the following command:

docker-compose up --build -d

Can anyone take some time to run it and identify the problem? Your insights on how to fix this would be greatly appreciated. Thank you for your help!

Solution

  • I checked the source code and followed the routes.

    When you access your http://localhost route, the BaseController@flutterRoute() will be executed. If you check the last few lines of the method, this shows.

    if (Ninja::isSelfHost() && $account->set_react_as_default_ap) {
    return response()->view('react.index', $data)->header('X-Frame-Options', 'SAMEORIGIN', false);
} else {
    return response()->view('index.index', $data)->header('X-Frame-Options', 'SAMEORIGIN', false);
}

    The current DB that you've given to us will go to the react.index view and that's where this HTML file will display.

    <!DOCTYPE html>
<html data-report-errors="{{ $report_errors }}" data-rc="{{ $rc }}" data-user-agent="{{ $user_agent }}" data-login="{{ $login }}">
<head>
    <!-- Source: https://github.com/invoiceninja/invoiceninja -->
    <!-- Version: {{ config('ninja.app_version') }} -->
  <meta charset="UTF-8">
  <title>{{ config('ninja.app_name') }}</title>
  <meta name="google-signin-client_id" content="{{ config('services.google.client_id') }}">

  @include('react.head')

</head>

<body class="h-full">
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
  
</body>

<!--

If you are reading this, there is a fair change that the react application has not loaded for you. There are a couple of solutions:

1. Download the release file from https://github.com/invoiceninja/invoiceninja and overwrite your current installation.
2. Switch back to the Flutter application by editing the database, you can do this with the following SQL

UPDATE accounts SET
set_react_as_default_ap = 0;

-->
</html>

    For me, I followed with the 2nd solution and change the DB value for the accounts data.

    php artisan db
> UPDATE accounts SET set_react_as_default_ap = 0;

    After that, this page will appear without any problem.

    invoice ninja screen