{"id":22350735,"url":"https://github.com/timmoth/blazor-npm-guide","last_synced_at":"2025-10-09T20:21:12.538Z","repository":{"id":132587733,"uuid":"456271985","full_name":"Timmoth/blazor-npm-guide","owner":"Timmoth","description":"Using NPM packages in a Blazor Wasm app","archived":false,"fork":false,"pushed_at":"2023-02-14T20:57:54.000Z","size":499,"stargazers_count":4,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-19T19:36:46.576Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Timmoth.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-02-06T21:04:00.000Z","updated_at":"2024-06-03T03:54:25.000Z","dependencies_parsed_at":null,"dependency_job_id":"91f21114-b6dc-480b-9b68-54d5d2263cfa","html_url":"https://github.com/Timmoth/blazor-npm-guide","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Timmoth/blazor-npm-guide","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Timmoth%2Fblazor-npm-guide","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Timmoth%2Fblazor-npm-guide/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Timmoth%2Fblazor-npm-guide/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Timmoth%2Fblazor-npm-guide/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Timmoth","download_url":"https://codeload.github.com/Timmoth/blazor-npm-guide/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Timmoth%2Fblazor-npm-guide/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279002015,"owners_count":26083258,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-09T02:00:07.460Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-04T11:12:53.341Z","updated_at":"2025-10-09T20:21:12.491Z","avatar_url":"https://github.com/Timmoth.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"Using NPM packages in a Blazor Wasm app\n=======================================\n\nFind the demo project on [Github](https://github.com/Timmoth/blazor-npm-guide)  \n  \nPrerequisites:\n--------------------------------------------------------------------------------------------------\n\n*   [Nodejs](https://nodejs.org/en/download/)\n*   [Visual Studio 2022](https://visualstudio.microsoft.com/)\n*   ASP.NET and web development workload\n\nSetup your solution and blazor wasm project\n\n    dotnet new blazorwasm -n blazor-npm-guide\n    dotnet new sln\n    dotnet sln add ./blazor-npm-guide\n    \n\nCreate a new directory for our npm packages and the js source that makes use of them\n\n    mkdir jslib\n    cd jslib\n    mkdir src\n    \n\nInitialize a new npm project (you can just skip past all the questions)\n\n    npm init\n    \n\nInstall webpack to bundle our library and put the output inside wwwroot/js\n\n    npm install webpack webpack-cli\n    \n\nCreate the webpack.config.js\n\n    const path = require(\"path\");\n    \n    module.exports = {\n        module: {\n            rules: [\n                {\n                    test: /\\.(js|jsx)$/,\n                    exclude: /node_modules/,\n                    use: {\n                        loader: \"babel-loader\"\n                    }\n                }\n            ]\n        },\n        output: {\n            path: path.resolve(__dirname, '../wwwroot/js'),\n            filename: \"jslib.js\",\n            library: \"jslib\"\n        }\n    };\n\nAdd a script to build webpack in package.json\n\n    {\n      \"name\": \"jslib\",\n      \"version\": \"1.0.0\",\n      \"description\": \"\",\n      \"main\": \"webpack.config.js\",\n      \"scripts\": {\n        \"test\": \"echo \\\"Error: no test specified\\\" \u0026\u0026 exit 1\",\n        \"build\": \"webpack --mode production\"\n      },\n      \"author\": \"\",\n      \"license\": \"ISC\",\n      \"dependencies\": {\n        \"highlight.js\": \"^11.4.0\",\n        \"webpack\": \"^5.68.0\",\n        \"webpack-cli\": \"^4.9.2\"\n      },\n      \"devDependencies\": {\n        \"@babel/core\": \"^7.17.0\",\n        \"babel-loader\": \"^8.2.3\"\n      }\n    }\n    \n\nInstall babel\n\n    npm install babel-loader @babel/core --save-dev\n    \n\nInstall your npm package, in this instance we're going to install highlight.js\n\n    npm install highlight.js\n    \n\nCreate src/highlight\\_lib.js\n\n    import hljs from 'highlight.js';\n    \n    export function highlight() {\n        hljs.highlightAll();\n    }\n\nCreate src/index.js to act as the root that exposes the functionality of our npm packages\n\n    import { highlight } from './highlight_lib';\n    \n    export function Highlight() {\n        return highlight();\n    }\n\nBuild our library\n\n    npm run build\n    \n\nNpm will have built our library and placed it in wwwroot/js, make sure to include the script in the body of the index.html\n\n    \n    \n        \u003c!DOCTYPE html\u003e\n    \u003chtml lang=\"en\"\u003e\n    \n    \u003chead\u003e\n        \u003cmeta charset=\"utf-8\" /\u003e\n        \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\" /\u003e\n        \u003ctitle\u003eTimmoth\u003c/title\u003e\n        \u003cbase href=\"/\" /\u003e\n        \u003clink href=\"css/bootstrap/bootstrap.min.css\" rel=\"stylesheet\" /\u003e\n        \u003clink href=\"css/app.css\" rel=\"stylesheet\" /\u003e\n        \u003clink href=\"webclient.styles.css\" rel=\"stylesheet\" /\u003e\n        \u003clink rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/styles/default.min.css\"\u003e\n    \u003c/head\u003e\n    \n    \u003cbody\u003e\n        \u003cdiv id=\"app\"\u003eLoading...\u003c/div\u003e\n    \n        \u003cdiv id=\"blazor-error-ui\"\u003e\n            An unhandled error has occurred.\n            \u003ca href=\"\" class=\"reload\"\u003eReload\u003c/a\u003e\n            \u003ca class=\"dismiss\"\u003e🗙\u003c/a\u003e\n        \u003c/div\u003e\n        \u003cscript src=\"_framework/blazor.webassembly.js\"\u003e\u003c/script\u003e\n        \u003cscript src=\"js/js-lib.js\"\u003e\u003c/script\u003e\n    \n    \u003c/body\u003e\n    \n    \u003c/html\u003e\n    \n\nInject IJSRuntime \u0026 make jsinterop call to jslib.Highlight\n\n    \n    @page \"/\"\n    @inject IJSRuntime JsRunTime\n    \n    \u003cpre\u003e\n    \u003ccode\u003eimport { highlight } from './highlight_lib';\n    \n    export function Highlight() {\n        return highlight();\n    }\u003c/code\u003e\u003c/pre\u003e\n    \n    @code\n    {\n        protected override async Task OnAfterRenderAsync(bool firstRender)\n        {\n            if (firstRender)\n            {\n                await JsRunTime.InvokeAsync\u003cstring\u003e(\"jslib.Highlight\");\n            }\n            await base.OnAfterRenderAsync(firstRender);\n        }\n    }\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimmoth%2Fblazor-npm-guide","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftimmoth%2Fblazor-npm-guide","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimmoth%2Fblazor-npm-guide/lists"}