NextJS + FeathersJS = Perfect Javascript Full-Stack

NextJS + FeathersJS = Perfect Javascript Full-Stack

NextFeathers .nextJS + feathersJS = Perfect Javascript Full-Stack! NextJS is the React Framework for a lot of things:

NextFeathers

nextJS + feathersJS = Perfect Javascript Full-Stack!

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 on the top level (i.e., PATH-TO/nextfeathers,) 
//but I see some issue for eslint working properly. 
//Since they are two separated frameworks, I would recommand to open two vscode windows.

//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.

Download Details:

Author: deniapps

Demo: https://deniapps.com/

Source Code: https://github.com/deniapps/nextfeathers

nextjs javascript react reactjs

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Increase Performance of React Applications Via Array JavaScript Methods

Increase Performance of React Applications Via Array JavaScript Methods. We will create a simple event management application in the react to add, update, and delete an event.

Routing in React without React-Router

I have been using React JS in my projects for quite some time now and am used to managing routing in my app using the react-router package. I have always been keen on having as little dependencies in my apps as possible, so, I always felt perturbed by the use of this particular package in simpler apps which did not have complex routes.

The Ugly Side of React Hooks

In this post, I will share my own point of view about React Hooks, and as the title of this post implies, I am not a big fan.

ReactJS: The Javascript Developer’s Guide

This article will walk you through the concepts you would need to know to step into the world of widely used ReactJS.