Write some useful stuff in the /web README (#94)

* Write some useful stuff in the /web README

* Fix one busted link in new README

* Reorder some README stuff per feedback
This commit is contained in:
Marshall Polaris 2022-04-26 13:08:29 -07:00 committed by GitHub
parent d6c7230d6a
commit f9f226aceb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -1,24 +1,61 @@
# Manifold Markets web
# Manifold Markets web app
## Getting Started
## Getting started
To run the development server, install [Yarn][yarn], and then in this directory:
1. `yarn` to install all dependencies
2. `yarn dev:dev` to bring up a local instance, pointing to dev database)
2. `yarn dev:dev` starts a development web server, pointing at the development database
3. Your site will be available on http://localhost:3000
(`yarn dev` will point you to prod database)
Check package.json for other command-line tasks. (e.g. `yarn dev` will point the development server at the prod database. `yarn emulate` will run against a local emulated database, if you are serving it via `yarn serve` from the [`functions/` package][functions-readme].)
### Running with local emulated database and functions
## Tech stack
1. `yarn serve` first in `/functions` and wait for it to start
2. `yarn dev:emulate` will point you to the emulated database
Manifold's website uses [Next.js][nextjs], which is a [React][react]-based framework that handles concerns like routing,
builds, and a development server. It's also integrated with [Vercel][vercel], which is responsible for hosting the site
and providing some other production functionality like serving the API. The application code is written exclusively in
Typescript. Styling is done via CSS-in-JS in the React code and uses [Tailwind][tailwind] CSS classes.
## Formatting
## Building and deployment
Before committing, run `yarn format` to format your code.
Vercel's GitHub integration monitors the repository and automatically builds (`next build`) and deploys both the `main`
branch (to production) and PR branches (to ephemeral staging servers that can be used for testing.)
Recommended: Use a [Prettier editor integration](https://prettier.io/docs/en/editors.html) to automatically format on save
Parts of the file structure that directly map to HTTP endpoints are organized specially per Next.js's prescriptions:
### /public
These are static files that will be [served by Next verbatim][next-static-files].
### /pages
These are components that [Next's router][next-pages] is aware of and interprets as page roots per their filename,
e.g. the React component in pages/portfolio.tsx is rendered on the user portfolio page at /portfolio.
### /pages/api
Modules under this route are specially interpreted by Next/Vercel as [functions that will be hosted by
Vercel][vercel-functions]. This is where the public Manifold HTTP API lives.
## Contributing
Please format the code using [Prettier][prettier]; you can run `yarn format` to invoke it manually. It also runs by
default as a pre-commit Git hook thanks to the pretty-quick package. You may wish to use some kind of fancy [editor
integration][prettier-integrations] to format it in your editor.
## Developer Experience TODOs
- Prevent git pushing if there are Typescript errors?
[react]: https://reactjs.org
[nextjs]: https://nextjs.org
[vercel]: https://vercel.com
[tailwind]: https://tailwindcss.com
[yarn]: https://yarnpkg.com
[prettier]: https://prettier.io
[prettier-integrations]: https://prettier.io/docs/en/editors.html
[next-static-files]: https://nextjs.org/docs/basic-features/static-file-serving
[next-pages]: https://nextjs.org/docs/basic-features/pages
[vercel-functions]: https://vercel.com/docs/concepts/functions/serverless-functions
[functions-readme]: https://github.com/manifoldmarkets/manifold/blob/main/functions/README.md