mirror of
https://github.com/storytold/artcraft.git
synced 2026-11-04 01:18:34 +00:00
131 lines
3.9 KiB
Markdown
131 lines
3.9 KiB
Markdown
# Storyteller GGF
|
|
|
|
## Coding Rules and Styles
|
|
|
|
```
|
|
Short Style Guide TS React and Engine:
|
|
|
|
No use of lets
|
|
|
|
No basic for loop operators.
|
|
Use the collection operators and array operators.
|
|
|
|
React Side / No modules over 200 lines. ( loose rule )
|
|
|
|
Don't do:
|
|
if (condition) return;
|
|
|
|
Do:
|
|
if (condition) {
|
|
return;
|
|
}
|
|
|
|
No use of any type.
|
|
If you can use chat gpt to create the interface.
|
|
```
|
|
|
|
## Branches
|
|
|
|
- `main` - The main branch is the production source of truth.
|
|
|
|
Changes to main will automatically build, but will not auto-deploy to production. You'll have to promote changes to production using the Netlify control panel.
|
|
|
|
Merge your code to main frequently. If you have to have a long-lived set of changes, ask yourself whether it might be better to feature flag your code off and
|
|
land it to main rather than fight rebasing against the whole team.
|
|
|
|
- `studio-staging` - The staging auto-deploy branch.
|
|
|
|
You do not ever need to interact with this branch. Changes to `main` will automatically be pushed to `studio-staging` and auto-deployed to
|
|
https://studio-staging.studio.storyteller.ai . You can test changes that have landed in `main` here before promoting them to production.
|
|
|
|
- `studio-testing` - The testing branch.
|
|
|
|
Anyone can push their changes to this branch for testing in a production-like environment. Since it is built and hosted on https://studio-testing.studio.storyteller.ai ,
|
|
you won't face CORS issues, same-site cookie issues, or have to use a local development proxy. (This doesn't obviate the need for a development
|
|
proxy for fast development iteration, but is a fantastic way to test your changes in a "production-like" environment.)
|
|
|
|
Force push to this branch by using `git push -f origin studio-testing`
|
|
|
|
## API Docs
|
|
|
|
Server API docs live here: https://storyteller-docs.netlify.app/
|
|
|
|
## Local Testing & Development
|
|
|
|
### Apple Silicon package installation issues
|
|
|
|
Installation of some dependencies via npm may fail on M-series macs (like node-canvas) and may require additional setup including python3 and some brew dependencies:
|
|
|
|
```
|
|
brew install pkg-config cairo pango libpng jpeg giflib librsvg pixman python-setuptools
|
|
```
|
|
|
|
### Set up `.env` and the Proxy Server
|
|
|
|
Copy & paste the env settings from `.env-local-proxy` to `.env`, (if the file `.env` do not exist, simply create one at the root of this project's folder beside the other env settings files).
|
|
|
|
The settings from `.env-local-proxy` directs all requests to `localhost:3000`, this will relieve us from having to deal with CORS between various services.
|
|
|
|
Then, start the proxy server in the folder `/proxy`. Before running the proxy for the first time, run:
|
|
|
|
```
|
|
npm i
|
|
```
|
|
|
|
To start the proxy run:
|
|
|
|
```
|
|
npm run dev
|
|
```
|
|
|
|
If the proxy fails, make sure your node version is 18.18. If you need to change the node version
|
|
run `npm rebuild` once before re-running `npm run dev`
|
|
|
|
### Run the Code Locally
|
|
|
|
To setup and run this project's code locally:
|
|
|
|
```
|
|
npm install
|
|
npm run dev
|
|
```
|
|
|
|
## PostHog
|
|
|
|
PostHog is installed and working. To create a feature flag go to https://us.posthog.com/project/75284/feature_flags
|
|
Add the feature flag for all users.
|
|
|
|
To check the feature flag in the app use code similar to this
|
|
|
|
```ts
|
|
import { usePosthogFeatureFlag } from "~/hooks/usePosthogFeatureflag";
|
|
import { FeatureFlags } from "~/enums";
|
|
|
|
const Component = () => {
|
|
const flag = usePosthogFeatureFlag(FeaturesFlags.FLAG_NAME);
|
|
// if flag is true, the feature shoud be executed & showed;
|
|
// if flag is false, the feature should be disabled & hid;
|
|
// for example
|
|
return(
|
|
<>
|
|
{flag && <ComponentThatDependsOnTheFlag />}
|
|
</>
|
|
);
|
|
};
|
|
```
|
|
|
|
## Other Documentation
|
|
|
|
Here is the Swagger documentation for the backend endpoints
|
|
|
|
- https://storyteller-docs.netlify.app/
|
|
|
|
This project uses Remix for routing and Tailwind for styling:
|
|
|
|
- [Remix Docs](https://remix.run/docs)
|
|
- [Tailwind Docs](https://tailwindcss.com/docs)
|
|
|
|
On Netlify, we use functions:
|
|
|
|
- [Netlify Functions Overview](https://docs.netlify.com/functions/overview)
|