No spa.html

[jbnv]

I have no idea what I'm doing wrong. The Nuxt server isn't producing the spa.html file. It's not throwing any error messages either:

$ npm run development

> industrial@1.0.0 development /home/jay/Documents/industrial
> cross-env NODE_ENV=development nodemon server.js --watch server

[nodemon] 1.19.4
[nodemon] to restart at any time, enter `rs`
[nodemon] watching dir(s): server
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node server.js`
Laravel development server started: http://127.0.0.1:3001
[Thu Jun 18 17:11:34 2020] PHP 7.4.7 Development Server (http://127.0.0.1:3001) started
ℹ Preparing project for development
ℹ Initial build may take a while
✔ Builder initialized
✔ Nuxt files generated

✔ Client
  Compiled successfully in 17.70s

ℹ Waiting for file changes
Server listening on http://localhost:3000.

Here's my nuxt.config.js object, stripped down to remove all other dependencies:

{
    mode: 'spa',
    dev: _isDevelopment,
    vue: {
        config: {
            debug: _isDevelopment,
            productionTip: false,
            devtools: _isDevelopment,
        },
    },
    laravel: {
        dotEnvExport: false
    },
    head: {
        title: process.env.npm_package_name || '',
        meta: [{
            charset: 'utf-8',
        },
        {
            name: 'viewport',
            content: 'width=device-width, initial-scale=1',
        },
        {
            hid: 'description',
            name: 'description',
            content: process.env.npm_package_description || '',
        },
        ],
        link: [{
            rel: 'icon',
            type: 'image/x-icon',
            href: '/favicon.ico',
        }],
    },
    loading: { color: '#fff', },
    css: [],
    plugins: [  ],
    buildModules: [
        '@nuxtjs/eslint-module',
    ],
    modules: [
        'nuxt-laravel',
    ],
    components: [   ],
    build: { extend(config, ctx) {}, },
}

[mentAl-maZe]

Hi @jbnv, It looks like nuxt is run in development here. In development nuxt uses a virtual filesystem to avoid problems with HMR (hot module reloading). If you want the spa.html file to be generated you have to use the nuxt generate or nuxt build cli command (they are equivalent in mode: 'spa'), or their respective programmatic counterparts.

Could you share your approach in a bit more detail (e.g. content of your server.js file), i'd be curious to see your implementation.

[jbnv]

I'm a bit confused as to what role Laravel has in serving the HTML. Per the instructions here, you create a catch-all route to have Laravel return HTML that runs your SPA. I already had such a route, and it created my page from a blade, so I figured the replacement was fairly simple:

Route::get(
    '/{path?}',
    function() { return file_get_contents(public_path('spa.html')); }
)->where('path', '.*')->name('nuxt');

Obviously this depends on something writing public/spa.html.

My server.js is rather basic:

async function start() {
    const nuxt = new Nuxt(config);
    const { host, port } = nuxt.options.server;
    await nuxt.ready();
    if (config.dev) {
        const builder = new Builder(nuxt);
        await builder.build();
    }
    app.use(nuxt.render);
    app.listen(port, host);
    console.log(`Server listening on http://${host}:${port}.`);
}
start();

A big hole in my understanding is what the server and serves.

[mentAl-maZe]

The route you created uses a fixed reference to a static file. The whole point of the module is to setup a proxy connection between the Laravel test server and the Nuxt test server.

Checkout the Documentation on Route forwarding:

Notice that the file_get_contents(env('NUXT_OUTPUT_PATH', public_path('spa.html')) first attempts to serve a file specified by an env variable before falling back to the static file.

In development this module injects the env variable NUXT_OUTPUT_PATH containing the URL of the testserver, which overrides the static file.

If you don't need any specific customization of the server I'd recommend using the inbuild commands of nuxt to start the testserver/build. i.e. instead of using cross-env NODE_ENV=development nodemon server.js --watch server in your script you can simply use nuxt (for development) or nuxt build to build the static files.

On the topic of the two servers: Laravel has a testserver which uses the buildin php server (php artisan serve).

Nuxt has a node based testserver which loads compiled files into memory to better handle HMR (Hot Module Reloading), this test server is not connected to laravel in any way (e.g. a laravel session would not propagate to the testserver)

In order to circumvent this limitation the module starts the laravel testserver from inside node and injects some env variables which can be used by the PHP configuration:

• NUXT_OUTPUT_PATH:
  • In development: contains a special URL to the nuxt testserver which exposes the generated template, effectively "proxying" calls over Laravel into Nuxt
  • In production: fetches the contents form the nuxt generated template, effectively serving the files generated by nuxt
• APP_URL:
  • In development: contains the URL to the nuxt testserver, so that references to APP_URL are resolved correctly by laravel
  • In production: unchanged

Additionally in development @nuxtjs/axios is configured to proxy all requests to laravel except for the special template URL

[jbnv]

The Nuxt server never generates NUXT_OUTPUT_PATH, or at least never writes NUXT_OUTPUT_PATH to .env. And am I supposed to set APP_URL myself or does one of the servers generate it?

[jbnv]

Additional information: Nuxt indicates that Laravel support is enabled, and it starts the Laravel development server. That's the only indication that I get that any of this plugin actually ran.

[mentAl-maZe]

@jbnv The module does not write to the .env file when used with nuxt dev, it injects the 2 variables mentioned above into the environment of the process, started from node (using execa => wrapper for child_process) to start the laravel testserver. Thus the variables defined in .env are extended/overwritten, i.e. you don't need to have them in the .env file.

Can you not access the page in development (localhost:3000)? Could you post the error that you get (js errors from the browser console and/or php errors from the storage/logs/*.log file)?

In production the nuxt sources are not served through a node server but compiled into actual JS, therefore there is no underlying injection of env variables into an environment. All env variables are read from the current environment + the .env file. This module provides the dotEnvExport configuration property as convenience, so that if true, the module writes to the .env file once all JS files have been compiled successfully (nuxt build or nuxt generate)