Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/0xheartcode/frontend-web3-skeleton
Frontend Web3 CI/CD Skeleton PnPm
https://github.com/0xheartcode/frontend-web3-skeleton
boilerplate cicd frontend pnpm template vite web3
Last synced: 3 days ago
JSON representation
Frontend Web3 CI/CD Skeleton PnPm
- Host: GitHub
- URL: https://github.com/0xheartcode/frontend-web3-skeleton
- Owner: 0xheartcode
- Created: 2024-09-14T22:58:38.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-09-28T16:50:26.000Z (4 months ago)
- Last Synced: 2024-11-19T04:55:06.772Z (2 months ago)
- Topics: boilerplate, cicd, frontend, pnpm, template, vite, web3
- Language: Makefile
- Homepage:
- Size: 1.18 MB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Blank Boilerplate CI/CD PNPM Project
Welcome to the Blank Boilerplate Frontend project.
This project is a React application utilizing TailwindCSS for styling and Ethers.js for blockchain interactions. It is configured to use ~~Yarn v4 and Craco~~ VITE as a build tool and PNPM as the package manager. It does use Github CI/CD.
## Table of Contents
- [Installation](#installation)
- [Available Scripts](#available-scripts)
- [Project Structure](#project-structure)
## Installation
To install the dependencies for this project, run:
```bash
pnpm install
```
## Available Scripts
In the project directory, you can run:
### `pnpm dev`
Runs the app in the development mode. Open [http://localhost:3000](http://localhost:5173) to view it in your browser.
### `pnpm build`
Builds the app for production to the `build` folder. It correctly bundles React in production mode and optimizes the build for the best performance.
### `pnpm lint`
Runs the linter to check for code style issues and potential errors.
### `pnpm preview`
Locally preview the production build. This command should be run after `pnpm build`.
### `pnpm typecheck`
Runs TypeScript type checking across your project.
## Project Structure
```
.
├── eslint.config.js
├── index.html
├── Makefile
├── package.json
├── pnpm-lock.yaml
├── postcss.config.cjs
├── public
│ └── vite.svg
├── README.md
├── src
│ ├── App.css
│ ├── App.tsx
│ ├── assets
│ │ └── react.svg
│ ├── index.css
│ ├── main.tsx
│ └── vite-env.d.ts
├── tailwind.config.cjs
├── tsconfig.app.json
├── tsconfig.app.tsbuildinfo
├── tsconfig.json
├── tsconfig.node.json
├── tsconfig.node.tsbuildinfo
├── utils
│ ├── dockerfiles
│ │ ├── docker-compose.nginx.yml
│ │ └── Dockerfile.nginxbuild
│ └── nginx
│ └── nginx.conf
└── vite.config.ts
```
### CI/CD Process
This project uses GitHub Actions for Continuous Integration and Continuous Deployment. The branches below may be present partially or completely.
- **Production Branch**: Code pushed to the `prod` branch will trigger the CI/CD pipeline, which will build and deploy the application to the production environment.
- **Staging Branch**: Code pushed to the `staging` branch will trigger the CI/CD pipeline, which will build and deploy the application to the staging environment.
- **Testnet Branch**: Code pushed to the `testnet` branch will trigger the CI/CD pipeline, which will build and deploy the application to the testnet environment.
- **Development Branch**: The `dev` branch is used for development purposes and does not trigger any CI/CD pipeline.
The CI/CD process is defined in the `.github/workflows` directory and includes steps such as checking out the repository, setting up Node.js, installing dependencies, building the project, creating a Docker image, and deploying it to the server.
## Contributing
Happy coding <(0_0)