Nuxt 3 with client-side only rendering doesn't load

Question

I want to build a client-side only application via Nuxt 3, and just as the docs describe here I've added ssr: false to my nuxt config.

I then used the nuxi build command to build the application, but it still says it needs to be run using node.

I proceed to run nuxi generate as I would normally do for static hosting.

According to the output from the generate command, I should be able to just deploy the public folder to any static web hosting. However, when I do this, I just get a completely white page.

I have tried running the same commands without ssr: false, and that does render a page, but that causes none of my javascript to work.

Edit: minimal reproducible example

So I've just follewd these steps from the nuxt docs.

Without making any code changes, except for editing my nuxt config, I've run generate.

This is what my nuxt config looks like right now;

import { defineNuxtConfig } from 'nuxt'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
    ssr: false,
})

I then ran npx serve .output/public as suggested in the comments, and that seemed to work just fine locally.

I then copied the public folder to my web server, but the same issue persists, just a white screen is visible.

Maybe I should clarify my question a little more: is it still possible to host a nuxt SPA, without running a node process on the server, just as it was before in nuxt 2?

Right now I just switched to a server rendered application, as I don't see another solution.

If you want to run an SPA, `generate` is enough. Then, you could try to run it locally with something like `npx serve .output/public`. If it works locally, then deploy it to Netlify. Otherwise, if it's not working that means that this is not a build issue but a code issue. Hence, some relevant snippets will be needed then (or even a [repro]). — kissu, Jun 25 '22 at 17:42
Hi @kissu thanks for the quick reply! I've just created a new nuxt 3 project from scratch and ran `npx serve .output/public` locally. That does in fact work just fine, however, when I then copy the `.output/public` folder to my web server, I just see a white screen as before. Right now I've switched to a server rendered application, which does work as expected, but I wonder if it's still possible to deploy an SPA without running a node process on the web server? — Maxim Janssens, Jun 26 '22 at 03:57
You don't need to have a Node.js instance for an SPA only setup. Meanwhile, you still need to use a lightweight server for that (to handle security, protocols, HTTP calls etc...), you can't only open that in your browser with a `file://` protocol. Good news, most of the places do that for you for free. Try to drop your folder here https://app.netlify.com/drop — kissu, Jun 26 '22 at 08:13
@Dav3rs I'm using nginx. But I switched to Server Side Rendering and created a reverse proxy using nginx. — Maxim Janssens, Aug 18 '22 at 16:56

score 0 · Answer 1 · answered Aug 19 '22 at 23:52

Using NGINX to serve a static generated build will fail currently, because nginx do not support the MIME type for mjs files (sended as octet-stream).

To fix it just add "application/javascript" as mimetype for mjs files in the nginx configuration.

Example to adapt to your needs:

1- Create in your project root folder a file named "nginx.conf" with:

user  nginx;
worker_processes  auto;

error_log  /var/log/nginx/error.log notice;
pid        /var/run/nginx.pid;

events {
    worker_connections  1024;
}

http {
    include       /etc/nginx/mime.types;
    types 
    {
        application/javascript mjs;
    }
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    include /etc/nginx/conf.d/*.conf;
}

With "include /etc/nginx/mime.types;" we are loading the default nginx mime types, and after that extending that list with "application/javascript mjs;".

2 - Then you could use that file in your image build step as follow (check the line 2):

FROM nginx:alpine
COPY ./nginx.conf /etc/nginx/nginx.conf
COPY .output/public /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Now you can deploy the image. Enable the gzip line if you are not using compresion already.

Nuxt 3 with client-side only rendering doesn't load

Edit: minimal reproducible example

1 Answers1