davidroyer / nuxt2-ssr-firebase Goto Github PK

View Code? Open in Web Editor NEW

50.0 7.0 11.0 2.67 MB

Nuxt2 Universal App with SSR via Firebase Functions and Firebase Hosting

Home Page: https://nuxt2ssrfire.firebaseapp.com

HTML 5.78% JavaScript 78.85% Vue 13.19% CSS 2.18%

nuxt nuxtjs firebase-functions ssr vue firebase nuxt2 nuxt-edge

nuxt2-ssr-firebase's Introduction

Nuxt.js Universal App with SSR via Firebase Functions and Firebase Hosting - Nuxt 2 Version

Host a Nuxt Universal app or site by combining Nuxt.js with Firebase Cloud Functions and Hosting.

Live Preview

Pre-Setup: Before Installing Any Dependencies

Obtain a Firebase Project ID to use for this project. See Overiew Here
Inside this directory, locate the file .firebaserc.sample, and do the following:

Rename this file to .firebaserc
Inside this file, replace your-project-id with your Firebase Project ID.

Setup

We will now get everything setup and deployed in 3 commands:

Note: All of these commands are ran from the root directory

Install Dependencies in all necessary directories in 1 command

yarn setup
# OR
npm run setup

Build The Project

yarn build
# OR
npm run build

Deploy To Firebase

yarn deploy
# OR
npm run deploy

Your site should now be live!

Development

There are 2 development options.

1. Without Firebase Functions

This will be like a normal Nuxt development experienced.

yarn dev

2. With Firebase Functions

This uses Firebase's local development tools to test our project

yarn serve

Firebase Project Setup

Create a Firebase Project using the Firebase Console.
Obtain the Firebase Project ID

Features

Server-side rendering with Firebase Hosting combined with Firebase Functions
Firebase Hosting as our CDN for our publicPath (See nuxt.config.js)

Things to know...

You must have the Firebase CLI installed. If you don't have it install it with npm install -g firebase-tools and then configure it with firebase login.
If you have errors, make sure firebase-tools is up to date. I've experienced many problems that were resolved once I updated.

The root directory has a package.json file with several scripts that will be used to optimize and ease getting started and the workflow
ALL commands are ran from the root directory

nuxt2-ssr-firebase's People

Contributors

Stargazers

Watchers

Forkers

idani ichiwa freesources jojoyuji kematzy miketierce alexpilugin mratiebatie chnghia chonyaver fs-exchange-364104

nuxt2-ssr-firebase's Issues

Error During Setup - Complains About engine version Mismatch

Hi,

Thank you for this package. Not sure you still track issues on this. Below is the error I got.
Not sure why it is giving this error.

yarn run v1.17.3
$ yarn install && yarn setup:client && yarn setup:server
[1/4] Resolving packages...
success Already up-to-date.
$ cd "src" && yarn install
warning package.json: No license field
warning nuxt-ssr-firebase-source: No license field
[1/4] Resolving packages...
success Already up-to-date.
$ cd "prod/server" && yarn install
info No lockfile found.
[1/5] Validating package.json...
error functions@: The engine "node" is incompatible with this module. Expected version "8". Got "10.16.2"
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

cp: prod/server/nuxt/dist/: No such file or directory

Hi there!

Thanks for writing this :-)

I’m getting the following error at the moment:

$ yarn copydist && yarn copystatic
$ cp -R prod/server/nuxt/dist/ prod/client/assets
cp: prod/server/nuxt/dist/: No such file or directory
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `yarn build:nuxt && yarn clean && yarn copyassets`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/simon/.npm/_logs/2019-01-10T23_10_22_601Z-debug.log

Do I need to do anything to setup the assets differently?

504 Gateway timeout when deployed on firebase

It runs locally when I run. yarn serve but fails when deployed on server. I followed the exact same steps got no error. I am on node 8.12

Vuex

Hi all,

I can't make work the store within this project. When I add some code, I get the following error:

[nuxt] Error while initializing app Error: [vuex] must call Vue.use(Vuex) before creating a store instance.

Does anybody know how to solve this?

Thanks

Server and Client DOM Mismatch

I'm trying to add Element-UI to the project. It renders in server but not the client side.
On page refresh it will show from the server correctly rendered but when client version comes in, it gives the error and looses the style.

I've followed all steps saw in other projects:

added element-ui dependency to [prod/server/package.json] and [src/package.json] files.
added element-ui.js to the plugins folder
add reference to the plugin in [nuxt.config.js]
add css style to the layout

I've cloned the project with this changes here:
https://github.com/infostatus/nuxt2-ssr-firebase-elementui

These are other projects where Nuxt and Element-ui work perfectly:

What is missing? Been around this for some days now, trying all different things.
Much appreciated for any help I can get.

Thank you so much for this helpful repository.