Forums

Hello,

I would like to host a Vue JS app as frontend with a Flask app (Python) as backend on Pythonanywhere. Hosting my Flask app works fine but my Vue JS app is not easy to host: I added a redirection from / to my Vue JS app but this is not enough because this does not have only one page. Thanks to vue-router, it can serve several paths in my URL. Its docs give example for some famous server (see https://router.vuejs.org/guide/essentials/history-mode.html), but I don't know how to redirect all /<some-path> to my Vue JS app. Do you have any idea?

Best regards

Hi, if you take a look at this help page https://help.pythonanywhere.com/pages/RedirectWebApp/, you could try adjusting the code we provide there to your needs?

Hello,

Unfortunately, it does not do the trick.

Let's assume we have a redirection from / to a Vue JS app thats has a route to /book and we have a Flask blueprint with URL prefix like /api. Moreover, we add a redirection as suggested in https://help.pythonanywhere.com/pages/RedirectWebApp/.

Entering a URL like https://www.example.com/book will redirect to https://www.example.com/ with no way to redirect to /book.

Could you post the code that you used to do that?

Any redirection method failed because it only made an infinite loop.

I would like to redirect requests to static apps before that they reach the Flask app. In an Apache config, I can do it like this:

<VirtualHost *:5000>
    ServerName xxxxxxxx:5000
    ServerAdmin xxx@xxx.com
    WSGIDaemonProcess mywebsite python-path=xxx
    WSGIProcessGroup mywebsite
    WSGIApplicationGroup %{GLOBAL}
    WSGIScriptAlias / /var/www/my-web-site/wsgi.py
    <Directory /var/www/my-web-site>
        Require all granted
    </Directory>
    <Directory /home/debian/my-web-site/>
        Require all granted
    </Directory>
</VirtualHost>

<VirtualHost *:80>
    ServerName xxxxxx:80
    ServerAdmin xxx@xxxx.com
    Alias / /home/debian/vue-js-app/
    <Directory /home/debian/vue-js-app/>
        Require all granted
        order allow,deny
        Allow from all
        <IfModule mod_rewrite.c>
            RewriteEngine On
            RewriteBase /
            RewriteRule ^index\.html$ - [L]
            RewriteCond %{REQUEST_FILENAME} !-f
            RewriteCond %{REQUEST_FILENAME} !-d
            RewriteRule . /index.html [L]
        </IfModule>
    </Directory>
    ErrorLog /home/debian/error_apache.log
    LogLevel warn
   CustomLog "/home/debian/log_apache.log" common
</VirtualHost>

Sorry if the config is not optimised.

I suspect that the only way you can get that working is to serve the Vue index file from your Flask app with a catch-all route. This SO post has something that looks like it should work.