{"id":25734217,"url":"https://github.com/coderooz/react-ssr-project","last_synced_at":"2025-10-28T12:45:02.282Z","repository":{"id":277864252,"uuid":"933282995","full_name":"coderooz/react-ssr-project","owner":"coderooz","description":"This is a react SSR test project.","archived":false,"fork":false,"pushed_at":"2025-02-16T16:33:24.000Z","size":92,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-26T04:33:48.146Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/coderooz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-02-15T15:38:33.000Z","updated_at":"2025-02-16T16:33:27.000Z","dependencies_parsed_at":"2025-02-16T17:45:26.134Z","dependency_job_id":null,"html_url":"https://github.com/coderooz/react-ssr-project","commit_stats":null,"previous_names":["coderooz/react-ssr-project"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/coderooz/react-ssr-project","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coderooz%2Freact-ssr-project","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coderooz%2Freact-ssr-project/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coderooz%2Freact-ssr-project/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coderooz%2Freact-ssr-project/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/coderooz","download_url":"https://codeload.github.com/coderooz/react-ssr-project/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coderooz%2Freact-ssr-project/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":281441022,"owners_count":26501758,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-28T02:00:06.022Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-02-26T04:32:59.683Z","updated_at":"2025-10-28T12:45:02.236Z","avatar_url":"https://github.com/coderooz.png","language":"JavaScript","readme":"# React SSR Project\n\n**Version:** 1.0.1\n\nThis project is a test application demonstrating server-side rendering (SSR) using React, Express, and Webpack. In version 1.0.1, we've enhanced the development experience by adding automatic rebuilding of client assets and live reload functionality. These improvements ensure that changes to your code are immediately reflected in the browser without manual refresh.\n\n---\n\n## Table of Contents\n\n- [Overview](#overview)\n- [Project Structure](#project-structure)\n- [Installation](#installation)\n- [Building the Project](#building-the-project)\n- [Running the Project](#running-the-project)\n- [Development](#development)\n- [License](#license)\n- [Author](#author)\n\n---\n\n## Overview\n\nThis project renders a basic React application on the server using Express. The client-side code is bundled with Webpack, and SSR is implemented using ReactDOMServer. In addition to improved SEO and fast initial page loads, version 1.0.1 now includes features for automatic asset rebuilding and live reload during development.\n\n---\n\n## Project Structure\n\n```\nReact-SSR-Project/\n├── node_modules/               # Installed packages\n├── src/\n│   ├── client/                 # Client-side code\n│   │   ├── screens/            # Screen components\n│   │   │   ├── About.jsx\n│   │   │   ├── Home.jsx\n│   │   │   └── NavBar.jsx\n│   │   ├── App.jsx             # Main App component\n│   │   ├── index.html          # HTML template\n│   │   ├── index.jsx           # Client entry point\n│   │   └── index.css           # Tailwind CSS file\n│   └── server/                 # Server-side code\n│       └── server.jsx          # Express server code\n├── public/                     # Static assets (e.g., favicon)\n│   └── favicon.ico\n├── .env                        # Environment variables\n├── .gitignore                  # Ignored files for Git\n├── package.json                # Project metadata and scripts\n├── package-lock.json           # Exact dependency versions\n├── README.md                   # This file\n└── webpack.config.cjs          # Webpack configuration for client and server\n```\n\n---\n\n## Installation\n\n1. **Clone the repository:**\n\n   ```bash\n   git clone https://github.com/coderooz/react-ssr-project.git\n   cd react-ssr-project\n   ```\n\n2. **Install dependencies:**\n\n   ```bash\n   npm install\n   ```\n\n---\n\n## Building the Project\n\nFor production, build the client and server bundles with:\n\n```bash\nnpm run build\n```\n\nThis command cleans previous builds, bundles JavaScript with Webpack, and processes Tailwind CSS—generating production files in the `dist` folder.\n\n---\n\n## Running the Project\n\nAfter building, start the server with:\n\n```bash\nnpm start\n```\n\nYour application will be available at [http://localhost:3000](http://localhost:3000).\n\n---\n\n## Development\n\nVersion 1.0.1 includes a streamlined development workflow with automatic rebuilding and live reload capabilities.\n\n### Features\n\n- **Webpack Watch Mode:** Automatically rebuilds client and server bundles when code changes.\n- **Tailwind CSS Watch Mode:** Rebuilds the CSS file on changes.\n- **Nodemon:** Restarts the server when server-side files change.\n- **Live Reload:** Automatically refreshes the browser when assets in the `dist` folder change (configured via `livereload` and `connect-livereload`).\n\n### Running in Development Mode\n\nTo launch the development environment, run:\n\n```bash\nnpm run dev\n```\n\nThis command uses `concurrently` to run:\n- `webpack:watch` – Watches and rebuilds JavaScript bundles.\n- `tailwind:watch` – Watches and rebuilds the Tailwind CSS file.\n- `server:dev` – Uses nodemon to restart the server on file changes.\n\n### Under the Hood\n\n- **Webpack Watch:** Monitors source files and updates the bundles automatically.\n- **Tailwind Watch:** Runs `npx tailwindcss -i ./src/client/index.css -o ./dist/output.css --watch` to update CSS.\n- **Nodemon:** Configured (with custom restart commands and file extensions) to watch the `src` directory.\n- **Live Reload:** The Express server uses `livereload` and `connect-livereload` to inject a script into your HTML that triggers a browser refresh when files in `dist` change.\n\n---\n\n## License\n\nThis project is licensed under the **AGPL-version-3.0** license.\n\n---\n\n## Author\n\n**Ranit Saha (Coderooz)**  \nEmail: [coderooz.dev@gmail.com](mailto:coderooz.dev@gmail.com)  \nWebsite: [https://www.coderooz.xyz](https://www.coderooz.xyz)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoderooz%2Freact-ssr-project","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcoderooz%2Freact-ssr-project","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoderooz%2Freact-ssr-project/lists"}