Skip to content

Latest commit

 

History

History
246 lines (182 loc) · 6.14 KB

index.md

File metadata and controls

246 lines (182 loc) · 6.14 KB
Raw

An Example Chat Application using Feathers & Next.js frameworks

This is an experimental project for honing Node.js full-stack skills, notably:

  • Feathers: a REST and real-time API layer for Node.js and the browser
  • composing Express applications: Feathers & Next.js
  • websocket-based messaging
  • LWT-based user authentication

The chat application is derived from Feathers sample projects:

These sample projects are combined into a single full-stack application adapted for Next.js and built upon a project foundation developed for the example project:

which implements the following features:

  • Next.js React framework
  • React Hooks
  • JSX styling w/ Bulma Sass
  • Markdown
  • Immer for state immutability
  • axios http w/ async/await
  • AVA and Jest for unit testing
  • ARIA attributes for accessibilty & testing
  • Cypress for integration and end-to-end testing

Note: This is just a simple demo application. It is not intended to be complete, nor useful except to present how the applied technologies can be utilized. Consequently, not all features of the foundational project(s) are used herein (e.g., JSX styling). The test coverage is not thorough, it provides just a few example cases of various kinds of tests.

Installation

git clone https://gitlab.com/mjbrown/nextjs-react-hooks-example.git
cd cnextjs-react-hooks-example
npm install

Operation

Production commands

Build application

npm run build

Start application daemon via process manager

npm run start

Stop application daemon via process manager

npm run stop

Testing commands

Run all tests

npm run test

Run unit tests

npm run test-unit

The AVA test runner is used for JavaScript logical tests (i.e., files matching *.js).

The Jest test runner is used for JSX user interface tests (i.e., files matching *.jsx).

Run unit tests under development

npm run test-unit-dev

Unit tests under development are distinguished by a .test.js or .test.jsx filename suffix, whereas working test cases are denoted with a .spec.js or .spec.jsx filename suffix.

Run all unit tests

npm run test-unit-all

This will run all tests for filenames with suffix matching .(spec|test).js?(x).

Run integration and end-to-end tests

npm run test-int

Develop/debug integration and end-to-end tests

npm run test-int-dev

Development commands

Clean cached data

npm run clean

Start application (foreground)

npm run dev

Start application with trace warnings

npm run trace

Check programming style

npm run lint

Static type analysis

npm run flow

Generate stylesheets

npm run style

Process manager commands

Refer to the PM2 command help or online documentation.

npx pm2 --help

Configuration

The config folder contains files specifying default configuration settings and specific override settings for production and testing environments.

Project Folder Organization

  • .next - generated Next.js files
  • client - client-side application & unit test cases
  • config - configuration files
  • cypress - integration & end-to-end test cases
  • flow-typed - flow type definitions
  • logs - log files
  • node_modules - Node.js modules
  • pages - Next.js routed pages
  • public - static web content
  • server - server-side application & unit test cases
  • test - test support files

Featured technologies

  • Node.js runtime
  • Express application framework
    • static routing
    • helmet header security
    • CORS
  • Next.js application framework
    • file system routing (pages)
    • API routing
    • automatic Code Splitting
    • server-side rendering (SSR) & caching
    • hot module reloading (HMR)
    • prefetching (via Web Worker)
    • JSX styling using Sass w/ postcss
  • React front-end
    • Components
    • JSX syntax
    • DOM (SSR)
    • Hooks (class-free)
      • local state
      • context stores (shared state)
        • action dispatching
        • state reducers
      • effects
  • Utility libraries
    • immer for immutability
    • rambdax for default values
    • axios for http
    • rust-match for conditionals
  • Styling
    • bulma framework
    • next-sass
    • postcss
  • Development
    • babel transpiler
    • eslint style checker
    • flow static type checker
    • node Javascript runtime
    • nodemon app monitor
    • webpack bundler
  • Testing
    • AVA - logic unit tests
    • Jest - JSX unit tests
    • Cypress - integration & end-to-end tests
    • concurrently
  • Production
    • pm2 process manager

License

The MIT License (MIT)

Copyright (c) 2019 Murray J Brown

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.