My Workspace

This project is a full-stack application that simulates a Node.js project with a Go modules backend and Jekyll documentation wiki. It utilizes Vite for the frontend build tool and ReactJS for the user interface, along with React Testing Library, Jest, and Playwright for testing.

Project Structure

gota-react
├── backend                     # Go backend application
│   ├── go.mod                  # Module dependencies, this is the build configuration
│   ├── go.sum                  # Module checksums, this contains the go mod download github.com/user/modname hash sum
│   ├── main.go                 # Entry point for the Go application
│   ├── cmd                     # External module execution commands
│   │   ├── api-server          # Sample file-server module call
│   │   │   └── main.go         # file-server module
│   │   └── metrics-analyzer    # Sample analyzer module call
│   │       └── main.go         # analyzer module
│   ├── internal                # Internal module objects which are protected from export
│   │   ├── auth                # Sample file-server module call
│   │   │   └── auth.go         # internally used code freely refactorable inside internal directory module
│   │   ├── metrics             # Sample metrics module call
│   │   │   └── analyzer.go     # internally used code freely refactorable inside internal directory module
│   │   ├── model               # Sample model module call
│   │   │   └── model.go        # internally used code freely refactorable inside internal directory module
│   │   ├── private_test.go     # Testing for component inside private
│   │   └── private.go          # Internal folder is specifically ignored by go processor
├── frontend                    # React frontend application
│   ├── __mocks__               # Testing data object simulations for mocking data
│   ├*** coverage               # Generated code coverage metrics data from build
│   ├*** dist                   # Generated production artifacts from build
│   ├*** node_modules           # Generated from build as download to support dependencies
│   ├── public                  # Public assets
│   │   └── index.html          # Main HTML file
│   ├── src                     # Source files for the React app
│   │   ├── assets              # Asset files
│   │   │   └── react.svg       # Scalable vector graphic test image
│   │   ├── App.css             # CSS component
│   │   ├── App.tsx             # Main React component
│   │   ├── index.css           # CSS component
│   │   ├── main.tsx            # Entry point for the React app
│   │   └── vite-env.d.ts       # Vite Types reference
│   ├── tests                   # Test files
│   │   ├── jest                # Jest framework unit testing files
│   │   │   └── unit.spec.tsx   # Tests for the App component
│   │   └── playwright          # Playwright framework end-to-end integration testing files
│   │   │   └── e2e.spec.tsx    # Tests for the App component
│   ├── .gitignore              # Version controls ignore directives
│   ├── eslint.config.js        # eslint configuration
│   ├── index.html              # default entry point for application
│   ├── package.json            # npm configuration
│   ├── README.md               # frontend specific README document
│   ├── vite.config.ts          # Vite configuration
│   ├── tsconfig.node.json      # TypeScript node context configuration
│   ├── tsconfig.app.json       # TypeScript app context configuration
│   └── tsconfig.json           # TypeScript configuration
├── scripts                     # Scripts for project management
│   ├── check-config.sh         # Script to check project configuration
│   └── check-tools.sh          # Script to check tool availability
├── wiki                        # Jekyll Ruby Gem documentation wiki site
│   └── _config.yml             # Jekyll Site configuration
└── README.md                   # Project documentation

Getting Started

To get started with this project, follow the instructions below:

Prerequisites

Ensure you have the following installed:

• Node.js (version 20 or higher)
• Go (version 1.19 or higher)
• npm (comes with Node.js)

Installation

1. Clone the repository:

   git clone <repository-url>
   cd gota-react
   

2. Navigate to the frontend directory and install dependencies:

   cd frontend
   npm install
   

3. Navigate to the backend directory and initialize the Go module:

   cd backend
   go mod tidy
   

Running the Application

1. Start the Go backend:

   cd backend
   go run main.go
   

2. Start the React frontend:

   cd frontend
   npm run dev
   

Running Tests

To run the tests for the React application, navigate to the frontend directory and execute:

cd frontend
npm test

Scripts

• check-config.sh: Checks the configuration of the project.
• check-tools.sh: Checks the availability of required tools and dependencies.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Appendix

New Development Setup

This system combines multiple coding frameworks into a combined project. These framework supporting installations and requirements are listed below:

1. Create hosting directory
   1. mkdir -p ~/Documents/github/gota-react
2. Install pre-requisite software
   1. Go
      1. sudo apt install golang
   2. NodeJS
      1. sudo apt install nodejs
      2. npm install -g typescript
   3. Vite
      1. sudo apt install vite
   4. Ruby
      1. sudo apt-get install ruby-full build-essential zlib1g-dev
      2. Set new Ruby gem installs to local user director

      echo '# Install Ruby Gems to ~/gems' >> ~/.bashrc
      echo 'export GEM_HOME="$HOME/gems"' >> ~/.bashrc
      echo 'export PATH="$HOME/gems/bin:$PATH"' >> ~/.bashrc
      source ~/.bashrc

      3. gem install jekyll bundler
      4. gem update --system
3. Setup New Project
   1. cd gota-react
   2. Create Front End application
      1. npm create vite@latest frontend --template react
      2. Assumption Not using vitest, there are vitest plugin compatibility issues. https://vitest.dev/
   3. Create Go Backend application
      1. mkdir backend && cd backend && go init && cd ..
   4. Create Wiki
      1. jekyll new wiki
      2. cd wiki
      3. bundle exec jekyll serve

GO Language Testing Technical Documentation

• Go Language Documentation

Setup Go Backend testing

• https://codezup.com/go-unit-testing-frameworks/
• https://pkg.go.dev/testing

Check Go Test Setup

• go test -v
• go test

Files named XXX_test.go will execute as tests.

https://go.dev/doc/modules/layout

As a reminder, we assume that the module line in go.mod says:

module github.com/someuser/modname

Playwright Testing

Ensure libraries available:

sudo apt update
sudo apt install libgtk-4-1
sudo apt install libgraphene-1.0-0

• npx playwright install chromium
• npx playwright install

Code Conventions

• React Developer Tools install locally to your browser.

• How to Use Process.env in Vite

Path Aliases and Imports

While searching for how to correct the tsconfig paths setups I had issues getting the vite and jest interpretations to function correctly.

I found an alternate to use '@/' to instead use '#src/' for alias names. The reason for the '#' symbol instead of the '@' is that the '@' is not allowed for syntax configuration inside package.json.

1. In package.json

  "imports": {
    "#src/*": "./src/*"
  }

2. In tsconfig.json

    "baseUrl": ".",
    "paths": {
      "#src/*": [
        "./src/*"
      ]

3. in vite.config.ts

alias: { '#src': path.resolve(__dirname, 'src') }

This is far simpler than coordinating the import alias syntax across multiple other configuration files.

TSConfig.json vs TSConfig.app.json

Settings in the TS.Config.json at the top level are used across the project. I have tried to remove items in tsconfig.app.json which are present in tsconfig.json. The main reason items were added to the tsconfig.json was to allow the interoperability between src and test to allow location of modules. Additionally paths aliases are shared between src and test to simplify and give consistency to coding references (too many ../../ can lose one).