(WIP) React-TypeScript-Boilerplate

This is my attempt at a boilerplate still WIP. Use at your own peril. [email protected] is installed to fix a deprecation warnings.

WARNING!

Included some css with dark/light theming, might remove it since you don't want to remove it every time you start a new project. Still thinking what is better a full color theme where you can change the colors or keep it as empty as possible. Right now I'm leaning to option one.

TODO (subject to change)

• Dev server
• Hello World
• scss modules and imports
• Update webpack to v5
• Improve webpack build production script
• Webpack use .env.development.local
• FIX: GitHub Pages deploy script
• Improve webpack build script with chunks
• Fix Manifest.json
• Routing (hash routing for github pages)
• Fix Build warnings (could fix itself with dependencies updates)
• Jest testing
• Cucumber BDD testing
• add some modules
  • Navbar
  • Buttons
    • Standard button
    • icon button
  • table
  • modal
• Cypress testing
• Full color theming or remove it

Install

npm install

Scrips

Scrips that are available

Start

Starts dev server and opens browser with hot reload.

npm start

Build

npm run build

GitHub Pages

When this project is pushed to the main branch it will automatically deploy to GitHub pages.

Want to add environment variables see the next section.

If you rather not have it happen you can change the branch in the ./.github/workflows/main.yml file or completely delete the folders and file.

Environment variables

For development you can add .env.development.local in the root of the project.

.env.development.local :

YOUR_KEY_NAME=<The value of the key>

./src/yourFile.(ts(x)|js(x)) :

const myKey = process.env.YOUR_KEY_NAME

GitHub pages Environment variables can be added by adding your environment Keys here and in you repository settings https://github.com/< userName >/< repository >/settings/secrets then adding them in the ./.github/workflows/main.yml in the build section and un-comment env: and the next line like this and add you ow key(s):

- name: Build
  # Add your environment Keys here and in you repository settings
  # https://github.com/< userName >/< repository >/settings/secrets
  env:
    YOUR_KEY_NAME: ${{ secrets.YOUR_KEY_NAME_GITHUB }}
  run: |
    npm install
    npm run build

---

Copyright (c) 2021 Tamer Elsayed