Vite plugin to inject hashed assets into DotNetNuke (DNN) .ascx skin files and generate dev-ready skins.
npm install @violetrose/vite-plugin-dnn-ascx``js
// vite.config.ts
import { defineConfig } from "vite";
import dnnAscx from "@violetrose/vite-dnn-ascx";
const skinPublicBase = /Portals/_default/Skins/MySkin/;
export default defineConfig(({ command }) => ({
base: command === "serve" ? "/" : skinPublicBase,
server: {
cors: true, // needed for local DNN to include vite dev scripts from localhost
},
plugins: [
dnnAscx({
ascxGlobs: [*/.ascx],`
publicBase: skinPublicBase,
}),
],
}));
`html
`
`js
// src/home.js
document.addEventListener("DOMContentLoaded", () => {
let counter = 0;
const counterButton = document.getElementById("counter");
counterButton.on("click", () => {
counter += 1;
counterButton.textContent = Counter: ${counter};`
})
});
For development, run vite and it should create a .dnn folder with your development skin.
Then, create a symlink in your DNN installation to this skin (the name can be anything as files are loaded from the vite dev server and not from the DNN Skin):
``
mklink /d "C:\
Lastly, add permissions to the .dnn folder for your IIS AppPool as you would for your DNN installation folder (i.e. IIS AppPool\ApplicationName, Network Service, IUSR).
Run vite build or tsc && vite build and the dist folder should contain your bundled skin. These files can be copied to your production DNN installation to deploy. The skin name and portal location should match what you pass for publicBase.
For local test builds, you can use the method described under Development to create a symlink to the dist folder instead of .dnn`, eliminating the need to copy/paste the output each time you rebuild.