DEV Community

Discussion on: Adding a PWA in Nuxt.js

View post
Collapse
 
riyaz7us profile image
riyaz7us •

I successfully setup the application with pwa. However, I cannot serve it via nginx reverse proxy (Although it works on localhost:3000, not virtual hosts, not even static generated app).

Collapse
 
javierpomachagua profile image
Javier Pomachagua •

Yep I have the same problem!
Running my backend (Laravel) and Frontend in VM Homestead with VirtualHost.

Collapse
 
riyaz7us profile image
riyaz7us • • Edited

I've found the solution i.e., NGINX configuration (Here, I'm serving laravel backend from subdomain like api.example.com and nuxt frontend from example.com). I made it successful using the configuration below within example.test.conf at nginx/sites-enabled and updating virtual hosts.

# HERE, I'M USING LARAGON TO SERVE MY PAGES LOCALLY
# MY FRONTEND URL -- NUXT (Static Directory) 
server {
    listen 80;
    server_name example.test;
        root "C:/laragon/www/Example/NuxtDirectory/dist/";

    index index.html index.htm;


    location / {
        try_files $uri $uri/ /index.php$is_args$args;
        autoindex on;
    }   

    charset utf-8;

    location = /favicon.ico { access_log off; log_not_found off; }
    location = /robots.txt  { access_log off; log_not_found off; }
    location ~ /\.ht {
        deny all;
    }
}
# MY BACKEND URL -- LARAVEL
server {
    listen 80;
    server_name api.example.test;
        root "C:/laragon/www/EXAMPLE/LaravelDirectory/public";

    index index.html index.htm index.php;


    location / {
        try_files $uri $uri/ /index.php$is_args$args;
        autoindex on;
    }

    location ~ \.php$ {
        include snippets/fastcgi-php.conf;
        fastcgi_pass php_upstream;      
        #fastcgi_pass unix:/run/php/php7.0-fpm.sock;
    }


    charset utf-8;

    location = /favicon.ico { access_log off; log_not_found off; }
    location = /robots.txt  { access_log off; log_not_found off; }
    location ~ /\.ht {
        deny all;
    }
}
Enter fullscreen mode Exit fullscreen mode

P.S. You may need to use reverse proxy if you're serving frontend with nuxt (SSR) like this:

    location / {
        proxy_pass     http://127.0.0.1:3000; 
    }
Enter fullscreen mode Exit fullscreen mode

Nuxt has comprehensive guide for reverse proxy here: nuxtjs.org/faq/nginx-proxy/

I hope you'd achieve it with similar configuration.

P.P.S: Laravel will block cross origin requests if you're using older laravel versions, this might be helpful:
github.com/fruitcake/laravel-cors