/!\ WORK IN PROGRESS /!\

typescript-sql-node-react

This technical stack is not the state-of-the-art, but a stable one (no need to worry for 3-5 years). It's usefull for long-term support apps, like Business or IT Intranet webapps.

Table of Contents

• Introduction
• Stack
• Usage
• Features
• References

---

Stack

Project view

Area	Product	Plugins or Impl
Language	TypeScript
UI	Bootstrap	JQuery
App	ReactJS	react-router, react-intl, redux
API	HTTP-client, ExpressJS	Swagger (OpenAPI)
Data	Sequelize, SQL	SQLite, PostGreSQL
Secu	Passport
Env	dotenv

Stack view

Layer	Product	Plugins or Impl
Client (browser)
	Bootstrap	JQuery
	ReactJS	react-router, react-intl, redux
	HTTP-client	Swagger (OpenAPI)
	Passport
Server (NodeJS)
	ExpressJS	Swagger (OpenAPI)
	Passport
	Sequelize
	dotenv
Database (dev)
	SQLite	SQL
Database (prod)
	PostGreSQL	SQL

---

Usage

Get

git clone https://github.com/DamienFremont/typescript-sql-node-react-starter.git
cd typescript-sql-node-react-starter

Execute DEV

npm install -g create-react-app
npm install

npm run watch

Execute PROD

• linux & mac: export NODE_ENV=production
• windows: set NODE_ENV=production
• win powershell: $env:NODE_ENV = "production"

npm install
npm run heroku-postbuild

npm start

Use it

• Go to http://localhost:3000
• Login with 'user', 'superuser' or 'admin' (login=password).

---

Features

A list of available features divided into tech area. You'll find other posts about this starter here (WORK IN PROGRESS).

Legend

• ✔️️ - Fully implemented as intended.
• ⚠️ - Partially implemented, somewhat broken or simply still not mature enough.
• ❌ - Not implemented yet or currently unusable.
• ⛔ ️ - Will not be implemented (see note).
• ❔ - Not verified or tested.

Table of Contents

• Packaging
• App
• Form
• Data-Table
• Security
• Workflow

Packaging

Feature	State	Note
build-dev	✔️
build-prod	✔️
conf-env	✔️	NODE-ENV=...
conf-file	✔️	dotenv
conf-placeholder	✔️	dotenv
banner	✔️	banner.txt
logger	✔️	level in env

App

Feature	State	Note
project-structure	✔️	components, pages, layouts
rendering-client-side	✔️	SPA
rendering-server-side	⛔	SSR
rendering-universal-app	⛔	Isomorphic
local-message	✔️	JSON
local-lang-detect	✔️	Browser
local-lang-change	✔️
icons	✔️	FontAwesome
layout-grid	✔️
layout-navbar	✔️
layout-routes	✔️
layout-help	✔️	general and pages
layout-urls	✔️	SSR, CSR perfs

API

Feature	State	Note
api-client	✔️
api-server	✔️	Express
api-swagger	✔️	OpenAPI, design-first
api-version	✔️	version URL
api-private-public	✔️

Form

Feature	State	Note
form-edition	✔️
form-toolbar	❌
form-validation	✔️	AJV
date-picker	✔️

Data-Table

Feature	State	Note
table	✔️
table-sort	❌
table-filtering	❌
table-pagination	✔️
table-export	❌
table-expand-row	❌

Service

Feature	State	Note
service-store	❌
server-authent	❌
server-security	❌
server-data-validation	❌	AJV
server-local-message	❌	server-side locale

Data

Feature	State	Note
file-download	❌
file-upload	❌	browse, drop, preview
data-schema	✔️
data-dataset	❌
data-orm-crud	✔️
data-orm-paginate	✔️
data-orm-search	❌

Entity

Feature	State	Note
data-entity	✔️	entity, value-object, id, dates, deleted-by-at
data-reference	❌	reference (name, label)
data-history	❌	version, history, event
data-domain	❌	UUID, join models by only one UUID

Security

Feature	State	Note
auth-local	❌	HTML form
auth-openid	❌	OpenID
auth-ad	❌	SAML
secu-role	❌
secu-right	❌
secu-page	❌
secu-routes	❌
user-settings	❌	local, remote
user-profil	❌	remote

Tests

Feature	State	Note
test-unit	❌
test-int	❌	integration
test-ui	❌	user-interface
cucumber-edit	❌	NON-DEV
cucumber-build	❌
cucumber-refactor	❌

Workflow

Feature	State	Note
workflow-client	❌
workflow-server	❌

Accessibility

Feature	State	Note
access-breadcrumb	✔️
access-size	✔️	em
access-wcag-aria	❌
access-offline	❌

Charts

• charts
  • line
  • bar

Tools

• VSC
  • settings
  • shortcuts
  • plugins
    • TS Hero
    • TODO
    • Debugger
• Chromium
  • REST Client

Other

• templating
  • Mail

---

References

• react https://github.com/Microsoft/TypeScript-React-Starter

• express https://esausilva.com/2017/11/14/how-to-use-create-react-app-with-a-node-express-backend-api/

• project structure https://reactjs.org/docs/faq-structure.html

• bootstrap https://reactstrap.github.io

• bootstrap components https://reactstrap.github.io/components/alerts/

• bootstrap layout https://reactstrap.github.io/components/layout/

• fontawesome https://fontawesome.com/how-to-use/on-the-web/using-with/react

• fontawesome config https://github.com/FortAwesome/react-fontawesome

• fontawesome icons https://fontawesome.com/icons?d=gallery&q=search

• Internationalize https://phraseapp.com/blog/posts/react-i18n-best-libraries/

• Internationalize json import https://hackernoon.com/import-json-into-typescript-8d465beded79

• Internationalize change language

• file download

• node ts react https://github.com/gilamran/fullstack-typescript

• node ts react https://github.com/kuldeepkeshwar/react-express-typescript-starter

• node ts react https://github.com/isaacsinuhe/create-react-app-ts-express-basic

• node ts react https://medium.com/front-end-hacking/client-server-and-shared-code-846097c5260e

• sql dump https://stackoverflow.com/questions/36392113/import-sql-dump-within-node-environment

• express ts https://mherman.org/blog/developing-a-restful-api-with-node-and-typescript/

• express ts https://github.com/Microsoft/TypeScript-Node-Starter/blob/master/package.json

• sequelize ts https://michalzalecki.com/using-sequelize-with-typescript/

• swagger express https://blog.cloudboost.io/adding-swagger-to-existing-node-js-project-92a6624b855b

• swagger ts https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/swagger-ui-express/swagger-ui-express-tests.ts

• datatable UI https://github.com/AllenFang/react-bootstrap-table

• datatable UI https://allenfang.github.io/react-bootstrap-table/docs.html#

• datatable UI https://react-bootstrap-table.github.io/react-bootstrap-table2/

• form generator from AJV https://github.com/mozilla-services/react-jsonschema-form

• form generator from AJV https://mozilla-services.github.io/react-jsonschema-form/

• utils LoadHash https://github.com/lodash/lodash