Skip to content

deniapps/nextfeathers

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

NextFeathers

nextJS + feathersJS = Perfect Javascript Full-Stack!

IMPORTANT!

NextFeathers currenly only works with "nextjs" v12 and "@ckeditor/ckeditor5-react" v5.

DEMO

What's Next?

NextJS is the React Framework for a lot of things:

  • Production
  • Pre-Rendered Apps
  • Static Websites
  • the Jamstack
  • the Enterprise
  • the Desktop
  • the Mobile Web
  • Lightweight Apps
  • SEO-Friendly Sites
  • PWAs
  • Electron Don't forget to check out their amazing DOC: https://nextjs.org/docs/getting-started But here, let's call it the frontend of NextFeathers :-)

What's Feathers?

FeathersJS is a framework for real-time applications and REST APIs. And here, let's call it the backend of NextFeathers :-) One thing I really like is feathers-cli, with which I can create an API in a couple minutes. Learn more at: https://feathersjs.com/

What's NextFeathers?

You probably know now: it's simply nextJS + FeathersJS! But more than that,it's actually a Javascript Blog System with ReactJS on Node. I know we need a better name, so I call it "DNA" - DeNiApps Also, I am adding a lot of examples about how to use nextJS, feathersJS, reactJS, MongoDB, semantic-ui, ckEditor, and more! You can find it at Playground

How to use it?

git clone https://github.com/deniapps/nextfeathers.git
cd nextfeathers
cd next
code . // assume you are using vscode - highly recommanded!!!

cd ../feathers
code .

//NOTE, you can start vscode at the top level (i.e., PATH-TO/nextfeathers,)
//but I see some issue for eslint working properly. (i.e., Cannot find module 'next/babel')
//Since they are two separated frameworks, I would recommand to open two vscode windows.
//Updated 10/25/2021 I found it here: https://stackoverflow.com/a/68838570/880833, if you prefer to start VSCode at the top level, then you could add the following setting in nextfeathers/.vscode/settings.json, like
{
  "eslint.workingDirectories": ["./next", "./feathers"]
}

//Then in each command window, run
npm install
npm run dev

//You need mongodb for blog system (DNA) to work, so after setup a mongo database,
//add your configuration at nextfeathers/feathers/config
//default.json is for dev, and production.json is for produciton

  "mongodb": "mongodb://localhost:27017/deniapps",
  "mongoUser": "admin",
  "mongoPass": "admin123$",

//Then use Postman, to create an user
//Endpoint: http://localhost:3030/user
//Method: POST
//Raw Body:
{
  "email": "[email protected]",
  "password": "admin123$"
}

//NOTE: after you have admin account created, add authentication to the services/users/users.hooks.js,
//it will be like this:
module.exports = {
  before: {
    all: [],
    find: [authenticate("jwt")],
    get: [authenticate("jwt")],
    create: [hashPassword("password"),authenticate("jwt")],
    update: [hashPassword("password"), authenticate("jwt")],
    patch: [hashPassword("password"), authenticate("jwt")],
    remove: [authenticate("jwt")],
  },

//And then, whereever hooked with authenticate["jwt"], the authentication is required,
//to get jwt token, call this:

//Endpoint: http://localhost:3030/authentication
//Methond: POST
//Body:
{
  "strategy": "local",
  "email": "[email protected]",
  "password": "admin123$"
}

I hope this is clear. I will try to write a tutorial soon.

Warning

This is not production ready yet. I am still working on DNA. What's that? Did I mention it's the name of NextFeathers Blog System.