Expressなしで、最短でNuxt(SSR)をfirebaseで公開してみる。

I’ve seen publishing nuxt on firebase as middleware for express here and there,
Can I go without express? I tried to do that.

The environment is
・ Windows 10
・ Visual Studio Code
・ Node 10.15.3
use.
The project has been created on the Firebase console.

Index.

(1) Firebase initialization
(2) Install nuxt under functions
(3) Preparation of Functions and from Hosting to calling Functions.
(4) Build and deploy

Let’s try it.

(1) Firebase initialization

In the console of Visual Studio Code, etc.
Move to the project folder and execute the following

CLI installation

npm install -g firebase-tools

Login and initialization

firebase login
firebase init
? Are you ready to proceed? → Y
? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. (Press <space> to select)  → Functions、Hosting
? Select a default Firebase project for this directory: (Use arrow keys) → 作成済みプロジェクトを指定

--- Functions related questions ---

? What language would you like to use to write Cloud Functions? (Use arrow keys) → Javascript
? Do you want to use ESLint to catch probable bugs and enforce style? (y/N) → n
? Do you want to install dependencies with npm now? → Y

--- Hosting related questions ---

? What do you want to use as your public directory? (public) → そのままenter
? Configure as a single-page app (rewrite all urls to /index.html)? → N

(2) Install nuxt under functions

install nuxt

cd functions
npx create-nuxt-app nuxt-app
? Project name → any
? Project description → any
? Author name → any
? Choose a package manager → Npm
? Use a custom UI framework (Use arrow keys) → None
? Use a custom server framework (Use arrow keys) → None
? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection) →なし
? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection) →なし
? Use a custom test framework (Use arrow keys) → none
? Choose rendering mode (Use arrow keys) → Universal

Move nuxt’s root folder up to functions.

From functions / nuxt-app / package.json
Move scripts, dependencies, devDependencies to functions / package.json.

The script start is doubled, but the original one is deleted.

    "start": "npm run shell", -> delete this line
    "start": "nuxt start",

Also, change the node version specification of engines from 8 to 10.

  "engines": {
    "node": "10"
  },

functions/nuxt-app/.git
functions/nuxt-app/node_modules
functions/nuxt-app/package.json
functions/nuxt-app/package-lock.json
-> delete

Move files (except folder) to the upper hierarchy except package.json and package-lock.json

.editorconfig
.gitignore(*overwrite)
nuxt.config.js
README.md

Added the following to nuxt.config.js.

  srcDir: 'nuxt-app',
  build: {
    publicPath: '/assets/'
  }

When all the above is done, in the functions folder execute following

npm install

(3) Preparation of Functions and from Hosting to calling Functions.

1) /functions/nuxt.config.js

export default {
↓
module.exports = {

In order to read it later with require.
I do not know the details, but seems to be recommended recommendation than import.

2) /functions/index.js

const functions = require('firebase-functions')
const { Nuxt } = require('nuxt')

const config = require('./nuxt.config.js')
const nuxt = new Nuxt(config)

exports.nuxtServer = functions.https.onRequest(async (request, response) => {
  const result = await nuxt.renderRoute(request.originalUrl, { request })
  response.send(result.html)
})

3) /firebase.json

  "hosting": {
[中略]
    "rewrites": [
      {
      "source": "**",
      "function": "nuxtServer"
      }
    ]
  }
}

Now, from hosting, functions are called.

(4)ビルド&デプロイ

Delete the files (index.html, 404.html) in / public.

Build

npm run build

The contents of generated /functions/.nuxt/dist/client
Move to / public / assets / folder

firebase deploy

The nuxt default page is published.
If you look at the source, you can certainly confirm that it is SSR.

As mentioned above, nuxt (ssr) was released on firebase without using express

Please comment if you have any comments.
Well then.