/vue-firebase-ssr

Para ver detalles de como funciona visitar

Primary LanguageJavaScript

Vue + Vuex + Vue SSR + Firebase (Cloud Functions+Hosting) šŸ”„ šŸ”„ šŸ”„

Boilerplate de implementaciĆ³n de creaciĆ³n de una WebAPP hecha en Vuejs con Server Side Rendering, lista para ser implementada como una cloud functions en Firebase pueden ver el demo en Vuejs SSR + Firebase šŸ”„

Inspirado en la ultima serie de videos de Server Side Rendering en cloud functions de firebase, decidĆ­ implementar una app con SSR. Basicamente, todo se reduce a crear una app basada en express con la documentaciĆ³n de Vuejs SSR y exportar la app de express() como una cloud functions exports.ssrapp = functions.https.onRequest(app).

Adicional tomar todas las peticiones de nuestro hosting de Firebase y hacer redirecta nuestra funcion exportada:

firebase.json

{
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "function": "ssrapp"
      }
    ]
  }
}

Indicaciones generales

Asumire que ya tienen instalado node, firebase-cli, asƭ como tambiƩn luego de clonar esta app ejecutar firebase init para inicializar los valores de su proyecto en firebase.

# Clona este repo
git clone https://github.com/jqEmprendedorVE/vue-firebase-ssr.git 

# entra al directorio 
cd  vue-firebase-ssr

# instala las dependencias
npm install

# serve with hot reload at localhost:8080
npm run dev

# para servir la app con firebase serve para emular localmente los cambios hechos en dev
npm run start

# para desplegar la app, a firebase
npm run deploy

Posibles issues

Aveces pasa que al ejecutar firebase serve --debug se denota un error relacionado a los watch permitidos. Se puede fixear ejecuntado este comando

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

En mi caso, se ejecuto con Fedora 30(Linux)

Proximamente

Una mejor explicaciĆ³n de como clonar este repo.