Skip to content

jonathanperis/blazor-mudblazor-starter

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

18 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Blazor Mudblazor Starter

Welcome to the Blazor Mudblazor Starter project – your comprehensive and universal starting point for building modern, interactive web applications using Blazor and Mudblazor. This repository is designed as a robust, flexible, and highly customizable template to jumpstart your next project. Whether you're a beginner looking to learn or an experienced developer ready to scale your application, this project is built to serve as your launchpad into the world of Blazor and cutting-edge web development.


Table of Contents

  1. Introduction
  2. About the Project
  3. Features
  4. Technologies Used
  5. Getting Started
  6. Configuration and Customization
  7. Project Structure
  8. Deployment
  9. Contributing
  10. License
  11. Acknowledgements
  12. Contact

Introduction

Blazor has rapidly become one of the most exciting frameworks in the modern web development ecosystem. Combined with the sleek design and comprehensive component library of Mudblazor, this starter template equips you with the tools to build responsive, intuitive, and powerful web applications. This repository embodies years of accumulated best practices, community insights, and development wisdom in an effort to provide an all-encompassing foundation for your projects.


About the Project

Blazor Mudblazor Starter is a full-featured, production-ready template that enables developers to quickly set up a Blazor project with Mudblazor integrated for UI components. The project is engineered to support rapid development cycles, ensuring a high degree of customizability, ease of integration of new features, and quick deployment across various environments.

Key Objectives:

  • Ease of Use: Simplify the initial setup phase with preconfigured settings tailored for Blazor and Mudblazor.
  • Performance: Optimize resource utilization and loading times through efficient coding practices and optimized configurations.
  • Scalability: Architect the codebase to be modular and easy to extend as your application grows.
  • Community-Driven: Incorporate community best practices and standards for a seamless development experience.

Features

  • Blazor Server/WebAssembly: Choose your deployment model without having to reconfigure the entire codebase.
  • Mudblazor Integration: Access a rich library of UI components, themes, and responsive design patterns.
  • Responsive Design: Prebuilt layouts ensure your applications look great on desktops, tablets, and mobile devices.
  • Component-Based Architecture: Develop reusable components that enhance maintainability and scalability.
  • Optimized Build and Deployment: Dockerfiles and CI/CD configurations for smooth deployment in containerized environments.
  • Extensible Structure: Ready for plug-ins, additional packages, or custom modifications to meet the precise needs of your project.
  • Robust Documentation: This README and inline comments within the codebase offer a complete guide to understanding and extending the project.

Technologies Used

The repository leverages a modern stack designed to provide ultimate flexibility and power:

  • Blazor: A framework for building interactive web UIs using C# instead of JavaScript.
  • Mudblazor: A Material Design component library for Blazor, providing a vast array of prebuilt, customizable UI components.
  • C#: Core language for application logic and server-side development.
  • HTML & CSS: Markup and styling for creating a clean and intuitive user interface.
  • Docker: Containerize your application using included Dockerfiles to ensure consistency across development and production environments.

Getting Started

To set up the Blazor Mudblazor Starter project on your local machine, please follow the instructions below.

Prerequisites

Before getting started, ensure you have the following installed:

Installation

  1. Clone the repository:

    git clone https://github.com/jonathanperis/blazor-mudblazor-starter.git
    cd blazor-mudblazor-starter
  2. Restore NuGet packages:

    Navigate to the project folder and run:

    dotnet restore

Running the Application

The application can be run in multiple modes. Choose the one best fitting your setup:

  • Dotnet (requires SDK):
    dotnet run --project WebClient.csproj
  • Docker:
    docker run -d -p 5000:5000 jonathanperis/blazor-mudblazor-starter:latest

Upon running, open your browser and navigate to http://localhost:5000 (or the port indicated in your console).


Configuration and Customization

Application Settings

Configuration files are available to help customize your deployment:

  • appsettings.json: Main configuration for global settings.
  • appsettings.Development.json: Developer-specific overrides for local testing.
  • Dockerfile: Predefined instructions for containerized deployments.

Theme and UI Customization

Mudblazor makes UI customizations straightforward:

  • Navigate to wwwroot/css/ to modify or extend styles.
  • Override or add new theming variables within your component files.

Extending Functionality

The project embraces a modular approach:

  • Create new components in the /Components directory.
  • Add pages in the /Pages directory.
  • Integrate additional libraries by installing NuGet or npm packages as needed.

Project Structure

A brief overview of the repository’s structure:

/src/WebClient
│
├── /Components          # Reusable UI components built with Mudblazor.
├── /wwwroot             # Static assets: CSS, JavaScript, images, etc.
├── appsettings.json     # Application configuration settings.
├── Dockerfile           # Docker configuration for containerized deployment.
├── Program.cs           # Application startup and dependency injection configuration.
└── README.md            # Comprehensive project documentation (you are here!).

Deployment

This template includes support for modern CI/CD pipelines:

  • Docker: Use the provided Dockerfile to build and run container images.
  • Cloud Providers: Easily deploy to Azure, AWS, or any other cloud provider supporting .NET applications.
  • CI/CD Integration: Configure your CI/CD pipeline with GitHub Actions, Azure Pipelines, or others to enable automated testing and deployment.

Example Docker commands:

docker build -t blazor-mudblazor-starter .
docker run -d -p 5000:5000 blazor-mudblazor-starter

Contributing

Contributions are welcome! Whether you’re adding new features, fixing bugs, or improving documentation, your help is appreciated. Please follow these steps for a smooth contribution process:

  1. Fork the repository.
  2. Create a new branch for your feature (git checkout -b feature/YourFeatureName).
  3. Commit your changes with clear, descriptive messages.
  4. Push your branch to your fork and open a pull request with a detailed description of the changes.
  5. Follow your project’s coding conventions and ensure that all tests pass before submitting a pull request.

For major changes, please open an issue first to discuss what you would like to change.


License

Distributed under the MIT License. See the LICENSE file for more information.


Acknowledgements

  • Blazor Team: For creating a framework that enables C# in the browser.
  • Mudblazor Community: For providing a powerful, easy-to-use component library.
  • Open Source Community: For continuously contributing to and improving these essential technologies.
  • Special thanks to all contributors and users who continue to support this project.

Contact & Support

If you have any questions, issues, or would like to contribute, please open an issue on GitHub.

Stay connected:


Enjoy building and innovating with Blazor and Mudblazor!

Happy Coding!