Skip to content

Latest commit

 

History

History
319 lines (246 loc) · 10.2 KB

README.md

File metadata and controls

319 lines (246 loc) · 10.2 KB

Table of Contents generated with DocToc

nuxt-typescript-ssr-firebase-auth

nuxt generate is really sucks!!! We lost nuxtServerInit, dynamic routing stuff etc. We need a good alternative to deploy our applications to the cloud without VPS and SSL configuration.

This repository is created as a sample of using nuxt on firebase-functions+firebase-hosting and still SSR and has the nuxtServerInit functionality as active.

Firebase full password authentication (register, login, forget password, reset password), google authentication, twitter authentication, facebook authentication in nuxt.

DEMO: https://nuxt-ts-firebase-auth-ssr.firebaseapp.com/

See the Features for more functionalities
Profile Ligthbox Ligthbox view
Crop login register

DETAILED DOCUMENTATION

Coming soon

Features

  • nuxtjs - universal mode
  • typescript
  • firebase
    • firebase-hosting
    • firebase-functions
      • performance configuration
      • the url same as hosting
      • dynamic sitemap
    • firebase-storage
      • profile photo
      • cover photo
      • upload single validated image
    • firestore
      • user collection
    • firebase-auth
      • firebase-auth password
        • register
        • login
        • forget-password
        • reset-password
        • send verification code
          • processing display when the button clicked
        • verify action with mail verification code
        • update password
      • firebase-auth google
      • firebase-auth twitter
      • firebase-auth facebook
      • link/unlink password authenticator
        • set password
      • link/unlink google authenticator
      • link/unlink twitter authenticator
      • link/unlink facebook authenticator
      • remember me
  • buefy
  • nuxt-i18n
    • English
    • Turkish
  • vee-validate
    • integration with nuxt-i18n
    • custom validation for image
  • SEO
    • Google meta
    • Facebook meta
    • Twitter card meta
  • redirect to next url after login
  • custom loading component
  • image
    • lazy load (vue-lazyload)
    • crop with cropperjs
    • lightbox with buefy/bulma
    • hover button on profile photo
    • square/round background image
  • custom error page - simple
  • global notification
  • toaster notification
  • tooltips
  • force logout if token is invalid
  • dotenv
  • rxJS
  • uuid
  • slug
  • better formatting
  • backend-frontend types in a npm package

Have a look Trello Board for more coming functionality

Prepare for build

firebase configuration

create project

create a firebase project on https://console.firebase.google.com/

update .firebaserc

update .firebaserc with the project created/owned by you

If you already have a project you can use it too.

firebase credentials file

This configuration is necessary for nuxt serverSiddle, If you use firebase-functions skip this step.

  • export the credentials files from your firebase project.
  • copy the file to server/config/firebase-admin-credentials.json

provider config

password

google

twitter

facebook

action configurations

TBD

development env

create a development branch and use that branch for development. Create a new project on firebase and setup `development' branch with the new firebase project

don't confuse yourself to work on multi-environment in one repository/branch

more: TBD

dotenv

create .env file with below content or rename .env.template file

WEBSITE_URL=https://nuxt-ts-firebase-auth-ssr.firebaseapp.com
# axios config
#API_URL=http://localhost:3000/api
API_URL=https://nuxt-ts-firebase-auth-ssr.firebaseapp.com/api

# firebase config
FIREBASE_API_KEY= ***
FIREBASE_AUTH_DOMAIN= ***
FIREBASE_DATABASE_URL= ***
FIREBASE_PROJECT_ID= ***
FIREBASE_STORAGE_BUCKET= ***
FIREBASE_MESSAGING_SENDER_ID= ***
FIREBASE_APP_ID= ***
FIREBASE_MEASUREMENT_ID= ***

Build & Run & Deploy

A global package.json has been created to manage easy build and deployment. All predeploy refer to scripts package.json in predeploy

install dependencies

$ npm --prefix functions install
$ npm --prefix src install

deploy

This command builds and deploys firebase-functions from functions and firebase-hosting from src

$ firebase deploy

run locally with firebase

$ npm run build

or

$ npm run predeploy:function && npm run predeploy:hosting

and then

$ firebase serve

you will see the links as output of the command

for locally development

hosting on local and api on firebase

first, deploy functions to firebase

$ npm run predeploy:function
$ firebase deploy --only functions

and then

cd src
npm run dev

hosting and api on local

enable nuxt serverMiddleware in src/nuxt.config.ts
  serverMiddleware: [
     '~/server/api'
   ],
update .env
API_URL=https://localhost:3000/api
and run
cd src
npm run dev

references

Contribution

Please feel free to send a pull request. Welcome :)

  • you see a mistake ( excepted, totally my mistake :) )
  • you know a better/best practice
  • you can add more functionality
  • you found a bug
  • you think you have time to fix/implement a card from Trello Board

hints

localization

change language

strategy: 'no_prefix',

changeLocale() {
  this.$i18n.setLocale(this.$i18n.locale === 'en' ? 'tr' : 'en')
}

for the other strategy

<nuxt-link :to="switchLocalePath('en')">English</nuxt-link>
<nuxt-link :to="switchLocalePath('tr')">Turkish</nuxt-link>

Errors and fixes

nuxt Failed to execute 'appendChild' on 'Node': This node type does not support this method.

add client-only tag

<client-only> 
   ...
</client-only>

npm dependency fixes

To list outdated libraries

npm install -g npm-check-updates

to update the outdated libraries

ncu -u
npm install