provide-traccar-web-modern-separate.md

Provide traccar-web 'modern' as separate frontend

I wanted to provide the new 'modern' web interface of traccar on a seperate domain without a new server instance.

TL;DR

• download https://github.com/traccar/traccar/releases/download/v$TRACCAR_VERSION/traccar-other-$TRACCAR_VERSION.zip
• unzip, move the ./web/modern directory to a location where your web server can access it and delete all other remaining files
• configure your webserver to serve the index.html
• configure your webserver to redirect or proxy the api and websocket requests to your server instance

Long Story

First I had a look where I can find the built and compressed version of the traccar-web interface. Too bad, the releases on the github repo are just zip-archives including the React source code.

That's the reason why I took a look into the Dockerfile of traccar-docker repository, which contains the built and compressed web interface: https://github.com/traccar/traccar/releases/download/v$TRACCAR_VERSION/traccar-other-$TRACCAR_VERSION.zip

Now I had to unzip it and move the ./web/modern directory to a location, where my webserver can access it.

Because I'm using Apache2 as reverse proxy and already have a running traccar instance with docker, all I had to do was creating a new vHost and proxying the api and websocket requests to the correct Docker container. Pretty similar to the already existing vHost for included "old" web interface.

<VirtualHost *:80>
        ServerName [SERVER_NAME]

        RewriteEngine On
        RewriteCond %{HTTPS} off
        RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
        RewriteCond %{HTTP_HOST} ^www\.(.*)$ [NC]
        RewriteRule ^(.*)$ https://%1/$1 [R=301,L]
</VirtualHost>

<VirtualHost *:443>
        ServerName [SERVER_NAME]
        DocumentRoot /var/www/traccar-modern

        ProxyRequests Off
        ProxyPreserveHost On

        RewriteEngine On
        RewriteRule ^/modern/(.*)$ /$1 [R=301,NC,L]

        <Location /api/session>
                ProxyPass http://127.0.0.1:8082/api/session
                ProxyPassReverse http://127.0.0.1:8082/api/session
        </Location>

        <Location /api/groups>
                ProxyPass http://127.0.0.1:8082/api/groups
                ProxyPassReverse http://127.0.0.1:8082/api/gropus
        </Location>

        <Location /api/drivers>
                ProxyPass http://127.0.0.1:8082/api/drivers
                ProxyPassReverse http://127.0.0.1:8082/api/drivers
        </Location>

        <Location /api/geofences>
                ProxyPass http://127.0.0.1:8082/api/geofences
                ProxyPassReverse http://127.0.0.1:8082/api/geofences
        </Location>

        <Location /api/calendards>
                ProxyPass http://127.0.0.1:8082/api/calendards
                ProxyPassReverse http://127.0.0.1:8082/api/calendards
        </Location>

        <Location /api/maintenance>
                ProxyPass http://127.0.0.1:8082/api/maintenance
                ProxyPassReverse http://127.0.0.1:8082/api/maintenance
        </Location>

        <Location /api/computed>
                ProxyPass http://127.0.0.1:8082/api/computed
                ProxyPassReverse http://127.0.0.1:8082/api/computed
        </Location>

        <Location /api/types>
                ProxyPass http://127.0.0.1:8082/api/types
                ProxyPassReverse http://127.0.0.1:8082/api/types
        </Location>

        <Location /api/commands>
                ProxyPass http://127.0.0.1:8082/api/commands
                ProxyPassReverse http://127.0.0.1:8082/api/commands
        </Location>

        <Location /api/notificators>
                ProxyPass http://127.0.0.1:8082/api/notificators
                ProxyPassReverse http://127.0.0.1:8082/api/notificators
        </Location>

        <Location /api/notifications>
                ProxyPass http://127.0.0.1:8082/api/notifications
                ProxyPassReverse http://127.0.0.1:8082/api/notifications
        </Location>

        <Location /api/devices>
                ProxyPass http://127.0.0.1:8082/api/devices
                ProxyPassReverse http://127.0.0.1:8082/api/devices
        </Location>

        <Location /api/socket>
                ProxyPass ws://127.0.0.1:8082/api/socket
                ProxyPassReverse ws://127.0.0.1:8082/api/socket
        </Location>

        RequestHeader set "X-Forwarded-Host" "[SERVER_NAME]"
        RequestHeader set "X-Forwarded-Port" "443"
        RequestHeader set "X-Forwarded-Proto" "https"
        RemoteIPHeader X-Forwarded-For
        RemoteIPProxiesHeader X-Forwarded-By

</VirtualHost>

<Directory /var/www/traccar-modern>
        DirectoryIndex index.html
        Options -Indexes +FollowSymLinks -MultiViews -ExecCGI
        AllowOverride All
        Require all granted
        Order allow,deny
        allow from all
</Directory>