Using lit-html inside an ASP.MVC .NET Core application with Typescript

This is the process for getting a lit-element component up and running inside and ASP.MVC .NET Core application.

Prerequisites: .NET Core, VSCode, Node. Install these before you start. You should be able to run “dotnet”, “code”, and “npm” successfully from a command line.

Create a project directory.

md Example.Web

Change to the project directory.

cd Example.Web

Create a new ASP.MVC project inside that directory.

dotnet new mvc

Open Visual Studio Code inside the new directory.

code .

Press F5 to start debugging the new app. VSCode will prompt you for an environment. Select “.NET Core” and a launch.json file will be created inside the .vscode directory. If you want to change the way the project launches when you debug, modify this launch.json file.

Press F5 again to start debugging. VSCode should launch your default browser with the web site up and running.

Return to VSCode and open a new terminal. Install lit-element.

npm install lit-element

Npm will create a “node_modules” subdirectory in your project. Just deal with the fact that now you have this folder related to node and don’t try to change the directory. It’s not likely worth it.

Create a scripts folder.

md scripts

Inside the scripts folder use VSCode to create a new file called my-element.ts. The following should be in the file:

import { LitElement, html } from '../node_modules/lit-element/lit-element';

class MyElement extends LitElement {

render(){

  return html`<p>Hello .NET Core and lit-html</p>`;

}

}

customElements.define('my-element', MyElement);

Save the file. Also inside the scripts folder, use VSCode to create another new file called main.js. The following text should be in the file.

import { MyElement } from './my-element';

Save the file. Using your terminal window, install typescript globally if you have not previously used typscript.

npm install -g typescript

Use VSCode to create a file called “tsconfig.json” in the root of your web project. The following text should be in the file.

{

  "compilerOptions": {

      "lib": ["es6"],

      "target": "es6",

      "noImplicitAny": true,

      "removeComments": true,

      "preserveConstEnums": true,

      "sourceMap": true

  },

  "include": [  "scripts" ],

  "exclude": [ "node_modules" ]

}

Run the typescript compiler in a terminal window.

tsc

You may see some errors from the lit-html compilation. I’m not what these are about but it seems safe to ignore them for now. You should now see my-element.js and my-element.map.js inside your scripts folder.

Now install webpack globally using npm in a terminal window if you have not previously used webpack.

npm install -g webpack

Note that the typescript and webpack installs only need to be done once on your machine. For future projects, you will not need to install them again.

Use VSCode to create “webpack.config.js” in the root of your web project. The following text should be in the file

var path = require('path');

module.exports = {

mode: 'development',

entry: './scripts/main.js',

output: {

  path: path.resolve(__dirname, 'wwwroot/js'),

  filename: 'bundle.js'

}

};

This configuration will tell webpack take everything that is referenced in the main.js file and bundle it into a single file inside wwwrooot/js/bundle.js. Run webpack from a terminal.

webpack

You should now see a “bundle.js” file inside wwwroot/js.

Edit the file /Views/Home/Index.html using vscode. Paste the following lines in at the end of the file.

<script type="module" src="/js/bundle.js"></script>

<my-element></my-element>

Return to the browser and you should see your lit-html component on the page.