skeleton netcore ef react ts

skeleton for netcore, db ef code-first ( server side ) + react typescript, json preserve ref ( client side ) solution and docker builder

---

• recent changes
• features
• requirements
• quickstart
• build and run container
• update database and diagram
  • backup migrations
  • restore migrations
  • automatic backup/restore migration test
• description of example

---

recent changes

• automatic backup/restore migrations
• dialog msg interpret html
• react-scripts 3.3.0 ( support optional chaining )
• centralized webapi try catch

features

• single solution debug ( just open in code, hit F5, to debug server and client )
• server side
  • net core ef code-first ( with reverse db diagram and typescript generation )
  • net core webapi http2
  • db triggers example
• client side
  • react typescript ( babel, rollup, webpack )
  • json with preserve reference that allow circular refs
• docker builder
  • allow to cache nuget, npmjs packages

requirements

• psql db server
• (optional) for db diagramming install schema crawler
• (optional) for deploy in docker
  • docker-ubuntu
  • docker-dotnet

quickstart

clone

git clone https://github.com/devel0/skeleton-netcore-ef-react-ts.git YOURPRJ
cd YOURPRJ
code .

configure your variables

token	description
srvapp	name of the application server+client
srvdb	name of database

variable	description
dbhost	host of database
dbname	name of database

file	tokens to replace
add-migr.sh	srvapp
backup-migr.sh, restore-migr.sh	srvapp
build.sh	srvapp
Dockerfile	srvapp
gen-ts.sh	srvapp
gen-db-dia.sh	srvdb, dbname, dbhost
get-cur-ver.sh	srvdb
inc-version.sh	srvapp, srvdb
srvapp/Code/Global.cs	srvapp, srvdb, dbname, dbhost

set pgpass for dev db scripts

• see here

tune config.json

• hit F5 first time to autocreate ~/.config/srvapp/config.json file
• tune variables into config.json to allow server db connection ( note: if use localhost instead an ip then config will not work for dockerized version )

create database and apply first migration

echo "create database srvdb | psql -h localhost -U postgres"
./add-migr.sh

autgen typescript

./gen-ts.sh

start

• from CTRL+SHIFT+D select .NET Core Launch (web)
• hit F5 from vscode to start server-client

add other packages

cd srvapp/ClientApp
npm install other-lib --save
npm install @types/other-lib --save-dev

build and run container

docker run -p 5555:5000 -v ~/tmp/srvapp-data:/data -v ~/.config/srvapp/config.json:/data/config.json myapps/srvapp

output

---> env.EnvironmentName=[Production] ; env.IsDevelopment=False
Hosting environment: Production
Content root path: /app
Now listening on: http://[::]:5000
Application started. Press Ctrl+C to shut down.

try connect to http://localhost:5555

of course for an online usage an https crypt required ( for that use nginx and a letsencrypt certificate )

update database and diagram

• create/modify tables in srvapp/Types/db
• edit srvapp/MyDbContext.cs to add set and constraints such as indexes, unique indexes if required
• execute a new migration ./add-migr.sh

about Migrations folder

• ⚠️ srvapp/Migrations folder not in git ( because other developers may work on other stage of migrations on other database hosts )

• take care to maintain Migrations for official or production database in order to apply new migrations

• if you lost Migrations folder on an official db a workaround to reget in sync is the following:

  • from psql create database anotherdb
  • tune config.json to point anotherdb
  • remove srvapp/Migrations folder if any
  • issue an ./add-migr.sh
  • edit __EFMigrationsHistory on official database so that equals to anotherdb table ( should there only 1 row MigrationId,ProductVersion )
  • gets back config.json to official database name
  • now if your official database was in sync with latest code-first changes you can run another ./add-migr.sh without errors
  • if your official db was out of sync you need to integrate by hand what missed and here you can inspect the srvapp/Migrations folder converted to SQL scripts using following cd srvapp; dotnet ef migrations script > manual.sql then applying some of manual.sql depending on whats lacks

• an experimental tool that take care to backup automatically migrations is provided (see below), this way you have not to worry about migrations backup because db have its own. 👪 If you working in team on a common database you have to apply follow procedure before any db ./add-migr.sh command:

  • pull latest sources
  • ./restore-migr.sh then
  • commit/push your sources

backup migrations

this task is automatically applied just after ./add-migr.sh and provides to zip Migrations folder copying that file to database migrations_backup table; it can run either manually through ./backup-migr.sh

output

devel0@tuf:~/Documents/opensource/skeleton-netcore-ef-react-ts$ ./backup-migr.sh 
---> backup migrations from [/home/devel0/Documents/opensource/skeleton-netcore-ef-react-ts/srvapp/Migrations] to db
  - zipping
  - copying to db

restore migrations

./restore-migr.sh

output

devel0@tuf:~/Documents/opensource/skeleton-netcore-ef-react-ts$ ./restore-migr.sh 
this will replace [/home/devel0/Documents/opensource/skeleton-netcore-ef-react-ts/srvapp/Migrations] with data from db migrations backup.
press a key to continue or CTRL+C to abort

---> restore migrations from db to [/home/devel0/Documents/opensource/skeleton-netcore-ef-react-ts/srvapp/Migrations]
  - copying from db
  - found    6.4 Kb size migrations zip
  - extracting to [/home/devel0/Documents/opensource/skeleton-netcore-ef-react-ts/srvapp/Migrations]

automatic backup/restore migration test

devel0@tuf:~/Documents/opensource/skeleton-netcore-ef-react-ts$ ./add-migr.sh 
---> creating migration [migr-2020-01-12T10:14:13+00:00]
...
---> updating database
...
---> backup migrations
---> backup migrations from [/home/devel0/Documents/opensource/skeleton-netcore-ef-react-ts/srvapp/Migrations] to db
  - zipping
  - copying to db
If you working on a shared db is suggested to commit/push your sources now so that other developers can restore migrations from database with accordingly code-first sources

• simulate deletion of Migrations folder

rm -fr srvapp/Migrations

• try ./add-migr.sh again and you'll receive error

devel0@tuf:~/Documents/opensource/skeleton-netcore-ef-react-ts$ ./add-migr.sh 
---> creating migration [migr-2020-01-12T10:16:49+00:00]
...
---> updating database
...
42P07: relation "migrations_backup" already exists
*** skip backup migrations

• recover using ./restore-migr.sh

devel0@tuf:~/Documents/opensource/skeleton-netcore-ef-react-ts$ ./restore-migr.sh 
this will replace [/home/devel0/Documents/opensource/skeleton-netcore-ef-react-ts/srvapp/Migrations] with data from db migrations backup.
press a key to continue or CTRL+C to abort

---> restore migrations from db to [/home/devel0/Documents/opensource/skeleton-netcore-ef-react-ts/srvapp/Migrations]
  - copying from db
  - found   10.1 Kb size migrations zip
  - extracting to [/home/devel0/Documents/opensource/skeleton-netcore-ef-react-ts/srvapp/Migrations]

• now ./add-migr.sh will work again

description of example

• fake authentication ( need to implement your own auth logic )
• two buttons ( add creates new record, get retrieve list of record )
• database store ( eg. ExampleStore ) uses react-hookstore to allow working on store from any part of the code with reflection of result
• Datetime
  • in C# DateTime can store Kind local, utc or unspecified and npgsql DateTime gets back from DB as Unspecified so a little auto-conversion needed
  • in Javascript Date mean only localtime
  • when C# DateTime is correcly kinded to UTC will serialized into json as "Z" ending ( utc time ) and correctly converted back when parseRefsResponse into objet

keynotes

• server
  • setup of Newtonsoft JSON serializer to preserve ref
  • connect Global singleton
  • add db context with npgsql plugin
  • webapi generic request and response
  • db context ctx injected into common controller
  • db connect on a config.json
  • add and list webapi samples
  • design constraint of tables through interfaces
• client
  • version app request update check
  • general layout with appbar and router switch with public and private routes
  • error page that shows server exception