Loading Navigation menu

View on github or contact Syntapse

Software Engineering and Web Development Services

title picture

About this site

Intended audience(s): project managers, business managers and agents.

Purpose and Scope

This site is a demonstration of bleeding edge APIs for Next JS 14, React and Redux Toolkit to serve as a stable, predictable foundation for building highly scalable apps with complex state modelling and storage requirements. Top level pages are delivered as React Server Components and data is fetched directly from endpoints and server actions providing a very secure, robust, typesafe, server based data access layer. Next 14 really has blurred the lines between client and server development making it much easier to create typesafe full stack solutions with Next than any other framework.

Feature Summary

Demonstrations have been kept as modular and simple as possible to demonstrate (and understand!) new key React and Next features in isolation. However a few more complex applications and features are included.

Authentication

This website implements both session and jwt logins for demonstration purposes only and is not production ready. For a complete production ready solution visit the Syntapse NextAuth demo site with Oauth provider authentication, automatic local account creation, email verified registrations, and 2FA logins.

Service Introduction

  • Next JS full stack software engineering using latest APIs for fast, secure, modular content delivery
  • Integration between client state using Redux and Next JS server state with server components and actions.
  • Integration with Nest JS websocket gateways for realtime data streaming.
  • Extensible user management with secure, scalable authentication and authorisation, email logins and 2FA.
  • Open source telemetry for realtime monitoring, fault diagnosis and performance monitoring and altering.
  • Extensible poly and monorepos to maximise code reuse and enable consistent typing between clients and servers.
  • Streamlined Docker based development environments for extensible poly and monorepos and parallel package development.
This site is being developed within a pnpm monorepo using pnpm workspaces defining Typescript client and server projects with a well defined tsconfig and package.json tree at suitable intersections to eliminate package duplcation. The github repository is private so the github README file is provided. This site is well documented though deliberately undecorated for a target audience is project managers, developers & agents interested in new Next JS features and monorepo structures.
Please contact admin@syntapse.co.uk for access.

Monorepo github README.md

pnpm monorepo

This a a pnpm monorepo. (performant) npm offers a streamlined and efficient approach to managing multiple projects under a single repository, significantly enhancing development workflows.

Benefits of pnpm

  • Adopting a pnpm monorepo can lead to more cohesive codebases, improved developer productivity, and a more scalable architecture for growing projects.
  • pnpm has a highly efficient, unique node_modules structure that avoids duplication of packages, thus saving disk space and accelerating installation processes. This efficiency is particularly advantageous in a monorepo setting, where numerous projects might share dependencies.
  • pnpm's strict linking strategy ensures that dependencies are precisely matched, reducing the chances of encountering "works on my machine" issues.
  • pnpm workspaces facilitate seamless dependency linking among projects within the monorepo, making it easier to develop interdependent packages without publishing them to a registry for testing.

General project structure

  • All source code is located in /src
  • /common contains resources shared by client and server code, enabling for example shared types between client and server code
  • /packages contains any packages intended to be re-used by multiple clients, servers or any other project included in the monorepo. e.g. currently /packages/client contains /components and /hooks that can be reused across Next JS projects with no additional configuration and will resolve at compile and run time.
  • Shared resources are resolved by both tsconfig (compile time) and next.config.mjs (run time).

package.json structure

The package.json structure is designed to ease maintenance and upgrades. Providing parent package.json minimise the amount of duplication across projects. pnpm provides a highly efficient storage mechanism for node_modules but will not eliminate cross project version dependencies when upgrades are required. Minimising package duplications provides an easier upgrade path.

Summary of existing package.json configuration:

  • the root /package.json contains packages available to all projects - client, server or anything else.

Client/Next projects

The following root folders have package.json file to share packages across next projects

  • /src/apps/next/package.json - share packages across Next projects.

Server Projects

The following combination of root folders package.json files make it easy to avoid duplication across existing projects and the pattern makes it easy to add new platforms and frameworks.

  • /src/apps/server/package.json - share packages across all server projects
  • /src/apps/server/express/package.json - share packages across express projects
  • /src/apps/server/nest/package.json - share packages across nest projects

docker notes

This monorepo consists of a number of individual projects sharing common resources but designed to run as ndependent docker containers each resolvable to a public URL.

  • the root docker-compose file is configured for installing and uninstalling packages, and all packages should be conducted from within the container (not the host). It is not designed to run individual projects and is not resolvable to external URL.
  • the docker-compose files to run each container are located in the root of each project folder with the correct docker mounts to enable access to shared resources, packages and libraries for building an running as a dev server.
  • All docker containers run using the same image for node js consistency and ease of future upgrades.

Server application state loaded into client

Prod build: This message is set on the server redux application state and is included in all routes. This will only show in production builds

Practical Applications

Redux Toolkit demo

Redux Toolkit Counter Demo

A simple reference example for Redux Toolkit using thunks for asynchronous actions. Todo examples on this site also include Sagas and Listeners for more complex processes. All code is available for review on github.

0

Developer Notes

Read a summary of main application features and development notes

Application notes

  • This site is a project within a well structured monorepo with facilities for global styling, components, services and other common code which can be very easily shared across projects.
  • Redux is modified to work with Next and supports consistent state between HMR updates. Without recommended mods Redux state will reset on every HMR code change. Redux is also configured to initialise common app state on the server which is available across all slices and routes (production build only).
  • It has basic responsiveness so all pages and components will adjust to desktop, tablet and mobile views. As this site is for tech demonstration not all edge cases and browsers have been tested.
  • It includes demos for Todo Lists using thunks, sagas and the new RTK createListenerMiddleWare API.
  • It includes demos for secure encrypted authentication using cookies and jwts, using both actions and fetch endpoints.
  • It includes some of the newest Next API features including parallel and intercepted routes and tests for cacheing pages and endpoints
  • Layout components (tabs, accordions, modals) have been designed and coded using no dependencies or UI frameworks to fully explore the new React APIs e.g. the tabbed container has an option to incorporate useTransitiions.

All Syntapse apps are developed as Docker containers

Docker notes

  • Docker can significantly streamline development of multiple apps and packages with the correct configuration.
  • This monorepo has a docker container for installations and separate docker containers with public URLs for consistuent projects.
  • Docker containers have public https URLs accessible on the public internet via a secure container-aware proxy making it very easy to add new secure apps and services.
  • This site is running both production and development builds concurrently from a single codebase mapping the .next dist folder to host files .next.dev and .next.prod respectively.
  • By using careful docker configuration packages and sites can be developed together and updated in realtime.
  • Packages can be exported as required, but can also run in companion containers to keep a streamlined development process