将Firebase配置动态注入到Nuxt&Vue应用

时间:2018-08-10 05:39:21

标签: firebase vue.js google-cloud-functions nuxt.js

总的来说,我正在尝试基于Firebase构建CMS。

当前代码都在repo中。

因此,基本上会有两个应用程序。一个用于主题(使用Nuxt.js构建),另一个用于管理页面(Vue SPA)。两者都将托管在Firebase云功能中。

以下是其中一个文件的摘要:

functions / index.ts

import * as express from 'express';
import { Nuxt } from 'nuxt';
import TanamConfig, { BaseConfig } from './config';

export class App {
  public app: express.Application;
  private nuxt: any;
  private _tanamConfig: TanamConfig;

  constructor(tanamConfig: BaseConfig = {}) {
    this._tanamConfig = new TanamConfig(tanamConfig);

    const { configuration, nuxtConfig } = this._tanamConfig;
    const { adminUrl, adminDir } = configuration;

    this.nuxt = new Nuxt(nuxtConfig);

    this.app = express();

    this.app.use(`/${adminUrl}/`, express.static(adminDir));
    this.app.use(`/${adminUrl}/**`, (req: express.Request, res: express.Response) => {
      res.status(200).sendFile('index.html', { root: adminDir });
    });

    this.app.get('**', this.handleThemeRequest.bind(this));
  }

  handleThemeRequest(req: express.Request, res: express.Response) {
    res.set('Cache-Control', 'public, max-age=600, s-maxage=1200');
    return this.nuxt.render(req, res);
  }
}

以下是使用软件包的示例之一:

import * as functions from 'firebase-functions';
import * as Tanam from 'tanam';

const mainApp = new Tanam.App({ nuxtConfig: { buildDir: './theme' } }).app;

export const serve = functions.https.onRequest(mainApp);

我的计划是可以在此处插入firebase配置。但是我不确定如何将它们发送到每个应用程序(主题和管理员)。因为它们都已经构建,所以我必须先构建它们,然后人们才能使用该软件包。

当前,firebase配置已在每个应用程序内进行了硬编码。因为我希望人们能够将其用于自己的firebase项目,所以如何使用自己的firebase配置来启动该软件包?

0 个答案:

没有答案