@trinityresearch/app
v0.1.4
Published
Build new apps quickly
Downloads
7
Maintainers
Readme
Trinity Research Application
This repo contains an implementation of a fullstack web application designed to author and display research content. The underlying code is a general purpose library and architecture reference for creating new modern web applications. The core techonologies are programming language - TypeScript, web framework - Next.js, UI library - React, CSS framework - TailwindCSS and State management - Apollo Client. The application interfaces with a backend built using a GraphQL server, via Schema and Resolvers - Nexus Schema, a Database client - Prisma Client and data stored in SQLite.
Getting started
1. Clone repo and install dependencies
Clone this repository:
git clone [email protected]:djfrsn/trinity-lib.git --depth=1
Install npm dependencies:
cd trinity-lib
npm install
Run NPM install lib:
npm i @trinityresearch/lib
Import code via JS/TS/Node:
import parseUrl from '@trinityresearch/lib'
2. Generate database client/types and seed data
Run this command to setup the database:
npm run setup
The above runs commands for the following:
The following command to create your Prisma client and Nexus type files. The Prisma client creates an interface to the DB and Nexus provides the schema, this mostly happens in /pages/api
. The frontend depends on the Apollo server to allow us to access the generated client via GraphQL. To generate the files, we run the generate:prisma and generate:nexus with the following:
npm run generate
The following command to create your SQLite database file. This also creates the User
and Post
tables that are defined in prisma/schema.prisma
:
Create your SQLite database file by running the following command. The User
and Post
tables defined in prisma/schema.prisma
will be created.
npm run migrate:prisma
The data from the seed file prisma/seed.ts
will be used to populate the database with mock data.
3. Run the app
npm run dev
Visit http://localhost:3000/
in your browser to see the app running.
Modify the application
The application defaults to displaying a UI with db seed data and example Prismic CMS data for this repo. You can add applications features via Prisma Schema or add new UI by replacing the apiEndpoint
in sm.json
with a new Prismic Repository, then create new template slices.
Modifying the application usually means one of the following will happen:
- Create a new repeatable page section with React and the Slice Machine
- Add new React components for feature update
- Author new pages without code via Prismic UI
- Update schema and server
API
to support feature update
Create a new Slice
A reusable section of a page, in the form of a slice allows us to create building blocks to form pages.
Run Slice Machine
npm run slicemachine
- Create a new slice or content-type via the Slice Machine on localhost.
Reference the patterns established in UtilBarTitle.tsx for slices. The slice should contain code that makes for a unique component and import resuable code. Reference the /create page when creating new content-types.
Create a new Page with Prismic
New pages can be created without code on Prismic using the "Page" content type and existing app sections with unique content. If a new static zone is required the content type "Create" along with the associated React UI establishes this pattern.
- Create a new Prismic document with a content type of "Page", the field
uid
will be the path for the page and render using the [uid].tsx file. Title and description are used in the HTMLhead
.
Create a new React component
Components are any reusable UI code found in /pages
or /slices
.
- Add new components in the dir ./components and export them in
./index.ts
to allow for use as an npm package.
Add server side api code
Adding a new row or column is done by changing or adding Models in schema.prisma. Fetching this data requires an update to object type resolvers in /pages/api. Once this is done, the change in backend data can be used in the front end GraphQL queries and components.
- Follow the 4 step process for doing so is laid out in the Evolving the app section of the official Prisma Next.js example.
References
General
- Official Prisma Next.js/GraphQL example
- Prismic.io Next.js Documentation
- Prismic Content Modeling
- Prismic Helpers
- Prismic Client