https://github.com/jeanmachuca/qcobjects-web-2025
This is a website made from scratch using QCObjects + TailwindCSS + Esbuild + SASS
https://github.com/jeanmachuca/qcobjects-web-2025
esbuild qcobjects sass tailwindcss
Last synced: about 1 month ago
JSON representation
This is a website made from scratch using QCObjects + TailwindCSS + Esbuild + SASS
- Host: GitHub
- URL: https://github.com/jeanmachuca/qcobjects-web-2025
- Owner: jeanmachuca
- License: lgpl-3.0
- Created: 2024-11-01T01:28:34.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-31T01:47:46.000Z (about 1 year ago)
- Last Synced: 2025-07-03T01:56:13.026Z (11 months ago)
- Topics: esbuild, qcobjects, sass, tailwindcss
- Language: JavaScript
- Homepage: https://jeanmachuca.github.io/qcobjects-web-2025/
- Size: 652 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
### Setting Up and Using `qcobjects-web-2025`
#### Prerequisites
- Node.js and npm installed on your machine.
- Basic understanding of JavaScript, TypeScript, HTML, and CSS.
#### Step 1: Clone the Repository
First, clone the repository (if you haven't already) and navigate to the project directory:
```bash
git clone https://github.com/jeanmachuca/qcobjects-web-2025.git
cd qcobjects-web-2025
```
#### Step 2: Install Dependencies
Install the necessary dependencies listed in the `package.json` file:
```bash
npm install
```
#### Step 3: Project Structure
Ensure your project structure looks something like this:
```
qcobjects-web-2025/
├── src/
│ ├── css/
│ │ └── tailwind-source.css
│ ├── img/
│ ├── js/
│ ├── scss/
│ ├── templates/
│ └── index.html
├── browser/
├── package.json
└── ...
```
#### Step 4: Build the Project
To build the project, you can use the following npm scripts:
1. **Build SASS**:
```bash
npm run build:sass
```
This command compiles your SCSS files into CSS.
2. **Build Tailwind CSS**:
```bash
npm run build:tailwind
```
This command processes your Tailwind CSS source file.
3. **Minify CSS**:
```bash
npm run minify:css
```
This command minifies your CSS files using `esbuild`.
4. **Build for Browser**:
```bash
npm run build:browser
```
This command runs all the build steps, including copying necessary files to the `browser` directory and bundling JavaScript files.
#### Step 5: Development Mode
To start the project in development mode with file watching, use:
```bash
npm run start:dev
```
This will watch for changes in the `src` directory and rebuild the project as needed.
#### Step 6: Start the Server
To start the server and serve your project, use:
```bash
npm run start
```
This command builds the project and starts the `qcobjects-http-server`.
#### Additional Notes
- **File Watching**: The `npm-watch` package is configured to watch for changes in the `src` directory with specific extensions (`ts`, `html`, `css`). It will trigger the `start` script when changes are detected.
- **Legacy Watch**: The `legacyWatch` option is enabled for compatibility with older file systems.