Logo

Short description

Table of contents

• Table of contents
• Quick start
• Status
• What's included
• Bugs and feature requests
• naming conventions rules
• Contributing
• Creators
• Thanks
• Copyright and license

Quick start

• install and initialize

  • install netlify-cli globally

    $ npm install netlify-cli -g

  • install module

    $ npm i

  • create .env.local file for netlify functions development

    touch .env.local

    • copy .env.defaults variable to .env.local file.

  • .create .env.local file for vite development

    touch src/pages/.env.local

    • copy .env.defaults variable to .env.local file.

• development

  • start vite (front-end)

    $ npm run dev

  • start netlify functions (back-end)

    $ npm run serve

  • start together ( vite + netlify functions)

    $ npm run dev:serve

    sometimes netlify-cli or vite-cli will crash

  • design your schema and types

    Edit setting/index.ts for your database schema.

• build and deployment

  • build static pages

    $ npm run build

  • deploy on netlify

    • create Netlify site

      netlify sites:create

    • or link Netlify site id

      netlify link

    • set Netlify environment variables same as .env.local.

      

    • deploy Netlify functions.

      $ npm run deploy

      check more detail for Netlify cli

Status

• Development since November 2023
• use vite for development environment and bundler.
• use React for main javascript library.
• use Typescript for syntax.
• use LessCSS and TailwindCSS for css library.
• use ESLint rules for coding style.
• use Mocks and faker for testing API.
• use Netlify for deployment.
• use Express for api router.

What's included

• public folder will copy to /dist
• src folder is reactJs entry point. default file is named as pages/index.tsx
• netlify/functions folder for express and Netlify functions source code.
• setting/index.ts config for schema and typescript setting.

Bugs and feature requests

• Node version must be above v18
• I will not maintain when this project is closed

naming conventions rules

1. general variable - Camel Case

   ex: setState、currentTarget、pinkBackground、innerText

2. react components and class name - Pascal Case.

   ex: RegularButton、NavigationBar

3. global variable or state - Pascal Case.

   ex: Context、LandingState

4. Immutable variable or environment variable - Screaming Snake Case.

   ex: PAGE、VITE_TITLE

5. type - I = interface, T = type.

   ex: IProps、TResult

6. enum options - Pascal Case + "Type".

   ex: ActionType、AlertType、ModalType

7. class name = Snake Case.

   ex: .button-group、.button-label

naming-conventions

Contributing

Please read through our contributing guidelines. Included are directions for opening issues, coding standards, and notes on development.

Moreover, all HTML and CSS should conform to the Code Guide, maintained by Main author.

Creators

maintainer, developer

• James Hsu

Thanks

Thank customers and some manufacturers for their support.

Copyright and license

Code and documentation copyright 2011-2022 the authors. Code released under the MIT License.