nextJS + feathersJS = Perfect Javascript Full-Stack!
NextFeathers currenly only works with "nextjs" v12 and "@ckeditor/ckeditor5-react" v5.
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 :-)
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/
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
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.
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.