Boiler plate package.json

[IrwinJames-FS]

We need a boiler plate package.json files ideally instead of running npm create vite@latest we might be able to just copy the package.json and run npm install.

Root package

• should include minimal dependencies.
• have a start, build command and maybe test command. (Maybe an eject command)

Client package

• a build of vite client side package

Dependencies

1. Install MUI?
2. SCSS?
3. ReactRouter?
4. vitetest

Server package

• a build of the express package

  Dependencies

  1. Install Passport?
  2. Nodemon?
  3. ESLint?
  4. JSON Only?
  5. Axios
  6. CORS
  7. Jest

[BradleyMatera]

Issue: Creating a Boilerplate package.json for Project Automation

Goal

To streamline project setup, the objective is to avoid the interactive prompts of npm create vite@latest by establishing a pre-configured boilerplate package.json. This approach simplifies the process, enabling the project structure to be established by copying the package.json and running npm install, minimizing manual steps.

Structure and Requirements

Root Package

The root package.json serves as the base, providing essential dependencies and scripts.

• Dependencies: Keep minimal to maintain efficiency.
• Scripts:
  • start: Starts the project.
  • build: Builds the production version.
  • test: Runs project tests (if needed).
  • Optionally, add an eject command for custom configuration setups.

Client Package

The client package includes the Vite setup with necessary dependencies for the frontend.

• Build: Uses Vite for compiling and serving the frontend.
• Dependencies:
  • MUI: For a responsive, modern UI.
  • SCSS: Provides advanced styling.
  • React Router: Enables client-side routing.
  • Vite Test: For client-side testing.

Server Package

The server package includes the backend setup, with dependencies for API and backend functionality.

• Build: Uses Express for backend API services.
• Dependencies:
  • Passport: For user authentication.
  • Nodemon: Automates server restarts on changes.
  • ESLint: Enforces code consistency.
  • JSON Only: For JSON-based configurations.
  • Axios: Handles HTTP requests.
  • CORS: Enables cross-origin requests.
  • Jest: For server-side testing.

Actions Taken

1. Configured vite.config.js for explicit JSX syntax parsing, addressing Vite's Rollup import issues.
2. Renamed App.js to App.jsx for clear JSX parsing, addressing Vite’s import issues.
3. Created package.json files for both client and server, ensuring each has the needed dependencies and scripts.

Testing and Publishing

This configuration and repository setup has been published on GitHub at BradleyMatera/devtest. Links to specific files and configurations are provided below:

• Root package.json
• Client package.json
• Server package.json

This approach allows for a fast and consistent setup, enabling the project to be ready for development immediately, without requiring any interactive CLI steps. The repository structure provides a clear separation between client and server, which promotes organized and maintainable code.