React Website Builder

Component Library that serves as a website builder using React Components

Description

• Mainly for Client projects.
• This project was bootstrapped with Create React App.
• This project uses Sanity CMS to store and manage content.
• This project has Storybook which is the component library.
• This project uses Firebase for hosting and deployment.
• The web-client directory uses the component library to deploy a website
• This project is type checked with Typescript and Transpiled with Babel

Dependencies

• npm
• tsc
• babel
• storybook - component library for demos
• firebase - hosting, functions, analytics
• sanity - cms datastore
• parcel - the build tool for the client
• There are some legacy local fonts and a logo which are copied with the npm build command but have separate npm commands in package.json. Feel free to copy over the logo with your web development company logo.

Getting Started

Config

• .env file - create this file if not already created in the top level and the web-client

  REACT_APP_SANITY_APIVERSION=2021-03-25
  REACT_APP_SANITY_APIVERSION_COCKTAILS=2021-03-25
  REACT_APP_SANITY_DB=development
  REACT_APP_SANITY_PROJECTID=<your sanity project id>
  REACT_APP_API_KEY=<your projects firebase api key>
  REACT_APP_AUTH_DOMAIN=<your projects firebase auth domain>
  REACT_APP_DATABASE_URL=<your projects firebase database Url>
  REACT_APP_PROJECT_ID=<your projects firebase project id>
  REACT_APP_STORAGE_BUCKET=<your projects firebase storage bucket>
  REACT_APP_MESSAGING_SENDER_ID=<your projects firebase message sender id>
  REACT_APP_APP_ID=<your projects firebase app ID>
  REACT_APP_FIREBASE_ANALYTICS_TRACKING_ID=<your projects google analytics tracking ID>
  REACT_APP_BASE_ROUTE=<your projects web client base route. Access your website site_url/base_route/page_route>
  REACT_APP_SANITY_PROJECTID_COCKTAILS=<sanity cocktails project id>
  REACT_APP_SANITY_DB_COCKTAILS=<sanity cocktails database>
  REACT_APP_BAR_INVENTORY_SLUG=<your projects cocktail bar inventory slug>
  REACT_APP_GOOGLEMAPS_EMBED_API_KEY=<your projects google maps embed api key>

Firebase

• update .firebaserc with your projects firebase project Id

Sanity

• cd sanityIo
• update all places where sanity project Id is used
• update all places where project name is used.

Functions

• cd functions
• update sanity client with project ID
• .env file

  SANITY_PROJECTID=
  SANITY_DB=development
  SANITY_APIVERSION=
  SANITY_API_TOKEN=<create this in your Sanity dashboard if your app needs permission to create sanity documents>
  SENDGRID_API_KEY=
  SENDGRID_FROM_EMAIL=

Installing

Component Library

• npm install

Web Client

• npm install

Functions

• cd functions
• npm install

Sanity

• cd sanityIo
• npm install

Development & Executing program

UI

• in the top level directory transpile cjs, esm with tsc; then copy local fonts and logo; then transpile with babel
  • npm build
  • npm publish
• go to web-client directory
  • Modify files in web-client for your project and latest version of the-handsomest-nerd-internal component library
  • npm start
  • stop the server
  • npm run build:assets
  • Restart the server
    • npm start
  • navigate to http://localhost:1234/

Functions

• npm serve

Sanity

• cd sanityIo
• npm run dev
• navigate in browser to http://localhost:3333/

Storybook

• npm run storybook
• navigate in browser to http://localhost:6006/ or whatever output says

Deployment

First Build & Publish Component Library

• version bump top level package.json
• npm publish

Build web client

• update web-client package.json with latest version of the-handsomest-nerd-internal
• npm install && npm start
• stop the server
• npm run build:assets
• you can stop the server(this step is just to the get dist dir in the client since this is needed for deploying functions which is the server side code)

Then Build Functions

• cd functions
• npm run deploy

Sanity

• sanity deploy

Help

Authors

Contributors names and contact info

James Singleton The Handsomest Nerd

License

This project is licensed under the GPL-3.0-or-later License - see the LICENSE.md file for details