task2-templating-demo

Task 2 - Templating Engine Demo 🚀

Modern Web Development with Nunjucks + Vite

This project demonstrates the evolution from a simple Bootstrap demo (Task 1) to a sophisticated templating engine + bundler implementation using modern web development tools.

🛠️ Technology Stack

Chosen Technologies:

Why These Choices?

Nunjucks over Handlebars:

Vite over Gulp:

📂 Project Structure

task2-templating-demo/
├── src/
│   ├── templates/
│   │   ├── layouts/
│   │   │   └── base.njk           # Base layout template
│   │   ├── partials/
│   │   │   ├── navigation.njk     # Navigation component
│   │   │   └── footer.njk         # Footer component
│   │   └── pages/
│   │       ├── index.njk          # Home page template
│   │       ├── about.njk          # About page template
│   │       └── contact.njk        # Contact page template
│   └── assets/
│       ├── css/
│       │   └── styles.css         # Custom styles
│       ├── js/
│       │   └── main.js            # Main JavaScript file
│       └── images/                # Image assets
├── dist/                          # Compiled output
├── package.json                   # Dependencies and scripts
├── vite.config.js                 # Vite configuration
└── README.md                      # This file

🚀 Getting Started

Prerequisites

Installation & Setup

  1. Clone the repository 
    git clone https://github.com/MANCHALA-SRAVAN-KUMAR/task2-templating-demo.git
cd task2-templating-demo
  2. Install dependencies 
    npm install
  3. Start development server 
    npm run dev

    This will start the development server at http://localhost:3000 with hot reloading enabled.

  4. Build for production 
    npm run build

    Compiled files will be generated in the dist/ directory.

  5. Preview production build 
    npm run preview

Available Scripts

Script Description
npm run dev Start development server with hot reloading
npm run build Build for production with optimization
npm run preview Preview production build locally
npm run clean Clean the dist directory

🎯 Features

Template System

Development Experience

Production Ready

🔧 Configuration

Vite Configuration (vite.config.js)

The project uses a custom Vite plugin to handle Nunjucks templates:

// Custom Nunjucks plugin for seamless integration
function nunjucksPlugin() {
  return {
    name: 'vite-plugin-nunjucks',
    configureServer(server) {
      // Development server with template rendering
    },
    generateBundle() {
      // Production build with template compilation
    }
  };
}

Template Configuration

Global variables available in all templates:

📱 Responsive Design

The project maintains the responsive design from Task 1 while adding:

🎨 Styling

CSS Architecture

Bootstrap Integration

📊 Performance

Development

Production

🧪 Testing & Validation

Manual Testing Checklist

Browser Support

📈 Comparison with Task 1

Aspect Task 1 (Bootstrap Demo) Task 2 (Templating + Bundler)
Architecture Static HTML files Component-based templates
Development Manual file editing Hot reloading with instant feedback
Maintainability Duplicated code DRY with template inheritance
Build Process None Optimized production builds
Scalability Limited Highly scalable architecture
Performance Basic Optimized with modern tooling

🚀 Deployment

GitHub Pages

  1. Build the project: npm run build
  2. Deploy the dist/ folder to GitHub Pages
  3. Configure GitHub Actions for automatic deployment

Netlify

  1. Connect your GitHub repository
  2. Set build command: npm run build
  3. Set publish directory: dist

Vercel

  1. Import your GitHub repository
  2. Framework preset: Vite
  3. Build command: npm run build
  4. Output directory: dist

🔗 Links

📚 Learning Resources

🤝 Contributing

This is an educational project, but suggestions and improvements are welcome:

  1. Fork the repository
  2. Create a feature branch
  3. Make your changes
  4. Submit a pull request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👤 Author

MANCHALA-SRAVAN-KUMAR

🙏 Acknowledgments

Built with ❤️ using modern web development tools

This project demonstrates the power of combining templating engines with modern build tools to create maintainable, scalable web applications.