This repository serves as a comprehensive template for kickstarting modern web projects using the JSDA-Stack. It is pre-configured for a seamless development experience, featuring Static Site Generation (SSG), Server-Side Rendering (SSR) with web components, and TypeScript support.
- Hybrid Rendering: Full support for both SSG and SSR, allowing for flexible and performant web applications.
- Web Components: Leverages the Symbiote.js framework for creating reusable and encapsulated components.
- TypeScript Integration: Comes with a pre-configured
tsconfig.jsonfor optional static typing in your JavaScript code. - Dynamic Routing: The dynamic application part uses a simple yet powerful routing mechanism.
- Markdown Processing: Built-in capabilities for rendering Markdown content.
- Component-Based Architecture: A modular structure for building and maintaining your component library.
- ES Modules: Utilizes native ES modules for a modern development workflow.
- Asset Optimization: On-the-fly minification and bundling for JavaScript, CSS, HTML, and SVG assets.
- Cloud Image Management: Integrated with the Cloud Images Toolkit for efficient image handling and optimization.
The project is organized into the following main directories:
.
├── cit/ # Cloud Images Toolkit data and configuration
├── dist/ # Build output for the static site
├── src/
│ ├── dynamic/ # Dynamic application source code (SSR)
│ │ ├── browser/ # Client-side JavaScript for dynamic pages
│ │ ├── css/ # CSS for dynamic pages
│ │ ├── node/ # Node.js handlers for data and routing
│ │ └── tpl/ # HTML templates for dynamic pages
│ ├── lib/ # Shared libraries and components
│ │ ├── components/ # Reusable web components
│ │ ├── css/ # Common stylesheets
│ │ ├── emoji/ # Emoji-related assets
│ │ └── icons/ # Icon library
│ ├── md/ # Markdown content files
│ └── static/ # Static site source code (SSG)
│ ├── css/ # CSS for static pages
│ ├── js/ # JavaScript for static pages
│ └── pages/ # Page definitions for the static site
├── types/ # Project-wide TypeScript type definitions
├── project.cfg.js # Main project configuration file
├── cit-config.json # Configuration for the Cloud Images Toolkit
├── tsconfig.json # TypeScript configuration
└── package.json # Project dependencies and scripts
- Node.js version 18 or higher
- npm or yarn package manager
-
Create a new repository from this template or clone it:
git clone https://github.com/rnd-pro/jsda-template.git my-project cd my-project -
Install the dependencies:
npm install
-
Static Site Development (SSG): This command starts a watcher and renders static pages.
jsda ssg
-
Dynamic Application Development: This command starts the dynamic application server.
jsda serve
The project's behavior is controlled by the project.cfg.js file. Here you can configure the dynamic and static parts of the application, minification, bundling, and import maps automated generation.
The cit-config.json file is used to configure the Cloud Images Toolkit. For more information, please refer to the official documentation.
- @symbiotejs/symbiote: A lightweight and powerful framework for creating web components.
- jsda-kit: The development toolkit for JSDAStack projects.
- @types/node: Type definitions for Node.js.
- cloud-images-toolkit: A toolkit for managing and publishing images to the cloud.
Contributions are welcome! Please follow these steps:
- Fork the repository.
- Create a new feature branch (
git checkout -b feature/your-feature). - Commit your changes (
git commit -m 'Add your feature'). - Push to the branch (
git push origin feature/your-feature). - Open a Pull Request.
This project is licensed under the MIT License. See the LICENSE file for details.
Happy coding with JSDA-Stack! 🎉