Introduction

Vyzor - MudBlazor Web App Server Premium Admin Template, With these template formats, it's very easy to create a presence and grab someone's attention around the web page Because the template is built using razor, C#, CSS3, MudBlazor framework and with Sass. So please before you start working with the template take a quick look on the documentation so that you can easily built your website. If You Love Our Template Design Please don't forgot to rate it. Thank you so much! 😊

Support and Updates:

When you purchase Vyzor, you gain access to free future updates to ensure your template remains up-to-date. Plus, our support team is always ready to assist with any questions.

What Do You Get with the Vyzor:

Vyzor provides all necessary Razor, CSS, SCSS, JS files, along with detailed Documentation to help you easily customize and implement the template.

Vyzor Compatibility with Popular Browsers:

Vyzor is fully compatible with major browsers, ensuring a seamless user experience across Chrome, Firefox, Safari, Edge, and Opera.

• Start by unzipping the project folder that you received from us.
• Go to the "Vyzor\ Components directory within the project folder, where you'll find over 8 + folders and 170 + .razor files.
• The MainLayout.razor file serves as the base for all razor pages.
• The CustomLayout.razor file is the base for authentication pages such as Create-password-cover.razor, Reset-password-cover.razor, Two-step-verification-basic.razor, Error401.razor, Error500.razor, and Under-maintenance.razor, etc.
• The LandingLayout.razor file is the base for the Landing.razor page.

Step 1: Visit the official .NET SDK download page.

Step 2: Click on the Download .NET SDK button.

Step 3: Run the installer to install the SDK on your system.

Using Visual Studio Code

• Unzip the project folder you received.
• Open the project folder in Visual Studio Code.
• Open a terminal and navigate to your project directory:

cd /path-to-your-project

Then run the development server:

dotnet watch run

Using Visual Studio

• Unzip the project folder.
• Open the .sln file.
• Press F5 to run the application.

Introduction to the MudBlazor Starter Kit:

The MudBlazor starterkit is a resource that helps developers kickstart their MudBlazor web development projects by providing a preconfigured and ready-to-use template. It aims to simplify the initial setup and provide a foundation for building MudBlazor Framework-based websites or applications.

Purpose of the MudBlazor Starter Kit:

The purpose of the MudBlazor starter kit is to save developers time and effort by offering a set of prebuilt files and configurations commonly used in MudBlazor projects. Instead of starting from scratch, developers can leverage the starter kit to quickly set up a project structure that adheres to best practices and industry standards.

Benefits of Using the MudBlazor Starter Kit:

The starter kit eliminates the need to set up the basic project structure manually. It provides a well-organized file and folder structure, including commonly used directories for separating code, templates, assets, and configuration files. This allows developers to focus more on implementing business logic rather than spending time on initial setup.

Starterkit Overview

You can use the Starterkit if you are creating a new project. It will be time-consuming to use the full admin version for a new project as Vyzor have more than 175 pages.

We have provided all the pre-build layouts like Sidemenu, Header, footer and blank pages etc in the Starterkit.

For further information or support regarding the template, please contact us using the provided link: https://support.spruko.com/

• Take a quick look at the folder structure of the "Starterkit."
• Integration of your customized razor pages becomes easy when using the "Starterkit."
• The "Starterkit" provides all the layout components, related assets, and plugins.
• To explore the contents of the "Starterkit," unzip the project folder received after purchase.
Navigate to the following paths:
• Example: C:/projectname/Components/Layout- This folder contains files such as MainLayout.razor,NavMenu.razor, MainHeader.razor, Footer.razor, Modal.razor and Switcher.razor files.
• Example: C:/projectname/Pages/- This folder contains files such as Home.razor, files and etc..,.

Gulp is a popular JavaScript task runner that automates common development tasks, such as compiling Sass to CSS, minifying JavaScript and CSS files, optimizing images, and more. Gulp allows developers to define tasks that process files in a project, and then run those tasks automatically when files are changed or when specific commands are issued.for more information about gulp Check here.

Prerequisites:

To install and set up all the prerequisites, follow these steps:

Ensure that Node.js is installed and running on your computer. If Node.js is already installed, you can skip this step. Otherwise, install it on your computer.

If you want to install and use the latest version of Node.js, you can find the necessary instructions on the official website.

To set up gulp, you need to install it globally on your system. Run one of the following commands in your terminal:

 npm install -g gulp

 npm install --save-dev gulp

Installation

Please follow below steps to install and setup all pre requisites:

Make sure to have all above pre requisites installed & running in your computer

Open your terminal, go to your folder and enter below command. This would install all required dependencies in node_modules folder.

 npm install

Build Production File

After completing the above steps, run the following command from the project root (Vyzor/) in your terminal or command prompt:

 gulp

Note:-Ensure all required node_modules are installed to run the gulp tasks successfully.

The following command performs several tasks to streamline your development workflow below are some of the task it performs :

1. Generates the libs/ and CSS/ folders directory