Welcome to Sandcastle

How create a new app

1. npx create-react-app appname --template typescript

2. yarn add @sc/api @sc/components @sc/modules @sc/plugins

3. yarn add -D customize-cra react-app-rewired

4. open package.json and make following changes...

   "name": "@sc/appname",
   "scripts": {
      "clean": "rm -rf node_modules build",
      "start": "react-app-rewired start",
      "build": "react-app-rewired build",
      "test": "CI=true react-app-rewired test",
      "eject": "react-scripts eject"
   }

5. create a file called config-overrides.js and set its content to

    const { override, babelInclude, addBundleVisualizer } = require('customize-cra')
    const path = require('path')
   
    module.exports = override(
      process.env.BUNDLE_VISUALIZE && addBundleVisualizer(),
      babelInclude([
        path.resolve('./'),
        path.resolve('../../plugins'),
        path.resolve('../../platform'),
      ]),
    )

6. create a file called .env and set its content to

    SKIP_PREFLIGHT_CHECK=true

How to deploy

1. sudo yarn production
2. sudo yarn build-10mf
3. • (if live site build change: yarn build, zip build)
4. • sudo git commit -am "Production Build"
5. • sudo git push
6. • sudo yarn ssh-production
7. • cd sandcastle
8. • sudo git pull
9. • (if live site build changed: cd apps/livesite, sudo rm -rf build/ && sudo unzip build)
10. • sudo yarn restart-servers
11. • logout
12. sudo yarn deploy-production

How to update the db schema in production

1. update schema platform/api/db/prisma/datamodel.prisma
2. test locally platform/api/db/prisma/npx prisma deploy
3. if you created a new table, update this file platform/server/data/resolvers
   1. Add to Query key
   2. Add to Mutation key (createX, updateX, updateManyX, upsertX, deleteX, deleteManyX)
   3. Add a new resolver key for the new table
   4. Update any resolvers to reflect new relationships
   • secret is to clone a previous key as an example
4. deploy on production

How to create a white label

I. Set up cloudfront for app

1. create a new distribution and point it to the sandcastle app
2. connect it to your domain
   1. get domain from client
   2. ask client to point dns to cloudfront url
   3. create ssl for it (using amazon acm)
   4. connect ssl to it

II. Set up cloudfront for sites

1. clone TMF distribution for _.domain.com a. point it to sandcastesites s3 b. get domain from client c. ask client to point dns to cloudfront url d. add domain to cloudfront _.domain.com e. create ssl for it (using amazon acm or set up via nginx proxy & acm upload)
2. update config.js & .env files to use cloudfront id & s3 dynamically (pull from db)

How to set up this app from scratch

Prerequisites: Make sure node, yarn, redis, docker, docker-compose, and prisma are installed globally

How to install everything

1. git clone http://github.com/ambid/sandcastle
2. chown -R {owner} ./sandcastle
3. cd sandcastle
4. yarn

How to set up environment variables

1. touch ./client.local.js ./env.local
2. for ./env.local, populate with

SKIP_PREFLIGHT_CHECK=true
SERVER_ENDPOINT=localhost
REACT_APP_SERVER_ENDPOINT=$SERVER_ENDPOINT
DOMAINS_ENDPOINT=localhost
INTEGRATIONS_ENDPOINT=zjbdm9olm3.execute-api.us-east-1.amazonaws.com
CLOUDFRONT_DISTRIBUTION_ID=E3SM2W9RZFSO5L
REACT_APP_CLOUDFRONT_DISTRIBUTION_ID=$CLOUDFRONT_DISTRIBUTION_ID
S3_SITES_BUCKET=sandcastlesites-staging
REACT_APP_CNAME=localhost

3. for ./client.local.js, populate with

import { InMemoryCache } from "apollo-cache-inmemory";
import { ApolloClient } from "apollo-client";
import { createUploadLink } from "apollo-upload-client";
import "isomorphic-fetch";

const uri = "http://localhost:4000"; // should be the url of the graphql server

export const client = new ApolloClient({
  link: createUploadLink({ uri }),
  cache: new InMemoryCache()
});

How to set up the prisma server from scratch...

1. cd api/db/
2. mv prisma xprisma
3. mkdir prisma && cd prisma
4. npx prisma init > Create new database | mysql | Javascript |
5. sudo rm -rf ./generated && sudo mv ../xprisma/* ./
6. sudo rm -rf ../xprisma
7. docker-compose up -d
8. npx prisma deploy
9. Paste in and execute the contents of ./newAccount.graphql

How to start everything

1. yarn local <- sets the .env files so that system knows to work on local resources
2. yarn start-all <- starts all the servers
3. yarn start <- starts the app
4. yarn storybook <- starts the component storybook