A simple Module Development Guide for Oqtane
Leigh Pointer [Microsoft MVP]
Oqtane Innovator, Engineer, Evangelist & Consultant
Introduction to Oqtane
Oqtane is a powerful application framework built using Microsoft Blazor. It's designed to host other Blazor applications as modules, providing a modular structure similar to content management systems like WordPress.
Key Features
Setting Up Your Development Environment
1. Clone the Repository
- Clone the Oqtane GitHub repository to your local machine
2. Build the Solution
- Open the solution in Visual Studio
- Fully build the Oqtane solution
3. Run and Install Oqtane
- Run the application from the IDE
- You'll see an Installation page in the browser
- Follow the prompts to complete the Oqtane installation
Creating Your First Module
1. Use the Module Creator Wizard
- In Visual Studio, locate the Module Creator Wizard
- Follow the wizard prompts to generate your module structure
2. Understanding the Module Structure
The wizard will scaffold your module into three projects:
a. Client Project
- Contains Blazor components (Index.razor, Edit.razor, Settings.razor)
- Handles user interface and client-side logic
b. Shared Project
- Contains shared models, interfaces, and constants
- Ensures consistency between client and server
c. Server Project
- Handles server-side logic, data access, and API endpoints
- Contains Repository and Controller classes
3. Key Components of a Module
- Index.razor: The main view of your module
- Edit.razor: For editing module content
- Settings.razor: For module configuration
- ModuleInfo.cs: Defines basic information about your module
领英推荐
- Repository.cs: Handles data access operations
- Controller.cs: Provides API endpoints for your module
JavaScript Integration in Oqtane Modules
1. Add JavaScript to Module.js
- Locate the Module.js file in your module's wwwroot folder
- Add your custom JavaScript functions here
Example:
javascript
// Module.js
function myCustomFunction() {
console.log("This is a custom function");
}
// Make the function available globally
window.myModuleName = {
myCustomFunction: myCustomFunction
};
2. Call JavaScript from Blazor Components
- Use IJSRuntime to invoke JavaScript functions from your Blazor components
Example:
csharp
@inject IJSRuntime JSRuntime
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await JSRuntime.InvokeVoidAsync("myModuleName.myCustomFunction");
}
}
}
3. JavaScript Interop Best Practices
- Use IJSRuntime for general JavaScript invocation
- Consider IJSInProcessRuntime for improved performance in WebAssembly mode
- Wrap complex JavaScript interactions in a JavaScript module for better organization
Debugging Your Module
1. In Visual Studio, right-click on the Oqtane.Server project
2. Select "Set as Startup Project"
3. Set breakpoints in your module's code
4. Run the application in debug mode (F5)
Best Practices for Module Development
1. Leverage Oqtane's built-in features (permissions, multi-tenancy)
2. Follow Blazor conventions for component lifecycle and state management
3. Optimize performance with lazy loading and efficient data fetching
4. Test your module across different Oqtane versions
5. Use Oqtane's existing infrastructure for common functionalities
Conclusion
Building modules in Oqtane allows you to extend the framework's capabilities while leveraging its robust infrastructure. By following this guide, you should now have a solid foundation for creating custom modules, integrating JavaScript, and utilizing Oqtane's powerful features in your module development process.
Remember to refer to the official Oqtane documentation and community resources for the most up-to-date information as you progress in your module development journey.
Join Our Oqtane Community: