Building a dynamic and fast Vite project using "lit-ts" to create a visually appealing static website

I recently put together a project using Vite Lit Element Typescript and everything seemed to be running smoothly on the development server. However, when I tried running npm run build, only the compiled JS file was outputted to the /dist folder without any HTML or CSS files.

Does anyone know how I can obtain the full static files similar to what we get with ReactJs projects?

If you need more context, feel free to check out this sample Vite project here. Also, here's a helpful link to the Vite guide: Vite Guide

javascripttypescriptweb-componentvitelit-element

Answer №1

The reason for this behavior is due to the configuration settings of the lit-ts template in vite, which is set up to build in library mode:

export default defineConfig({
  build: {
    lib: {
      entry: 'src/my-element.ts',
      formats: ['es'],
    },
    rollupOptions: {
      external: /^lit/,
    },
  },
})

If you wish to avoid this setup, simply remove the mentioned configuration code and the build process will generate all assets in the /dist directory.

export default {}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Loopback: Unable to access the 'find' property as it is undefined

I've come across a few similar questions, but none of the solutions seem to work for me. So, I decided to reach out for help. I'm facing an issue while trying to retrieve data from my database in order to select specific parts of it within my app ...

javascriptnode.jsreactjs

What methods can be used to modify the appearance of the cursor depending on its position?

Is there a way to change the cursor to a left arrow when on the left half of the screen and switch it to a right arrow when on the right half, using JavaScript? I am trying to achieve something similar to what is shown on this website. I attempted to acco ...

javascripthtmlcss

Handling null values in React with Typescript and GraphQL: best practices

Dealing with nullable fields in GraphQL queries can be tricky. When working with a large nested query, handling all the null values cleanly becomes a challenge... For example, consider the following GraphQL query: query { markdown { authors { ...

reactjstypescript

Creating a Yeoman application with a personalized Node.js server

As I embark on the journey of developing a node.js and angular application using the powerful Yeoman tool, I can't help but wonder about one thing. Upon generating my application, I noticed that there are predefined tasks for grunt, such as a server ...

javascriptnode.jsangularjs

Organizing a vast TypeScript project: Comparing Modules and Namespaces

As someone relatively new to TypeScript, I am currently working on a small prototyping framework for WebGl. During my project refactoring, I encountered challenges in organizing my code, debating between using modules or namespaces as both have their drawb ...

typescriptmodulenamespaceswebpackbrowserify

How can I execute a task following a callback function in node.js?

Is there a way to run console.log only after the callback function has finished executing? var convertFile = require('convert-file'); var source, options; source = 'Document.pdf'; options = '-f pdf -t txt -o ./Text.txt'; ca ...

javascriptnode.jscallback

employ the value of one array in a different array

Currently, I am working with an array (const second) that is being used in a select element to display numbers as dropdown options {option.target}. My question is: Is there a way to check within this map (that I'm using) if the 'target' from ...

javascripthtmlcssarraysreactjs

Having trouble with the functionality of the AngularJS Custom Service?

I have developed a straightforward service as shown below: var app = angular.module('myApp', ['ngRoute']); app.service('UserService', function() { this.user = {firstName:"",middleName:"",lastName:"",email:"",dob:""}; this.ad ...

javascriptangularjs

What is the best way to delegate the anonymous function logic contained within the subscribe() method?

Imagine you have a code block similar to this: constructor(private _http: HttpClient) { this.fetchUsers(5); } employees: any[] = []; fetchUsers(count: number) { this._http.get(`https://jsonplaceholder.typicode.com/users`).subscribe( ...

angulartypescript

Struggling to find the definition of a Typescript decorator after importing it from a separate file

Consider the following scenario: decorator.ts export function logStuff(target: Object, key: string | symbol, descriptor: TypedPropertyDescriptor<any>) { return { value: function (...args: any[]) { args.push("Another argument ...

javascripttypescript

Learn the process of directing to a view in a jQuery AJAX call with Spring MVC

Below is the ajax call I am using: $.ajax({ type: "POST", url: contextPath +"/action", cache:false, dataType: 'text', data: {Id:Id}, success: funct ...

javascriptjqueryajaxspringjsp

`Shifting a spherical object from point A to point B along its axis`

I am currently working on a project that involves rotating a sphere from point A to point B on itself. After finding Unity3d code for this, I came across the following solution: Quaternion rot = Quaternion.FromToRotation (pointA, pointB); sphere.transform ...

javascriptmathwebglthree.js

Unable to access the POST value in the current context

I am having trouble retrieving the values from a simple form that consists of two files: APP.js and FORM.ejs. I am attempting to get the values submitted through the form. APP.js: const http = require('http'); const express = require("express"); ...

javascriptnode.jsformsexpressejs

What is the best way to create a JavaScript Up/Down Numeric input box using jQuery?

So, I have this Numeric input box with Up/Down buttons: HTML Markup: <div class="rotatortextbox"> <asp:TextBox ID="txtrunningtimeforfirstlot" ClientIDMode="Static" runat="server">0</asp:TextBox> (In mins) </div> <div cl ...

javascriptjqueryhtmlasp.net

Populate a map<object, string> with values from an Angular 6 form

I'm currently setting keys and values into a map from a form, checking for validation if the field is not null for each one. I am seeking a more efficient solution to streamline my code as I have over 10 fields to handle... Below is an excerpt of my ...

htmlangularformstypescriptfieldset

Converting Background Images from html styling to Next.js

<div className="readyContent" style="background-image: url(assets/images/banner/banner-new.png);"> <div className="row w-100 align-items-center"> <div className="col-md-7 dFlex-center"> ...

javascriptreactjsnext.js

Monitoring changes in an array of objects using AngularJS's $watch function

Exploring the world of AngularJS, I'm on a quest to solve a challenging issue efficiently. Imagine having an array of objects like this: var list = [ {listprice: 100, salesprice:100, discount:0}, {listprice: 200, salesprice:200, discount:0}, {listpr ...

javascriptangularjs

Ways to prompt for user input using JavaScript

How can I collect user input using JavaScript for a website that saves the input into a text file? Below is the code I am currently using: <button type="button" onclick="storeEmail()">Enter Email</button> <script> ...

javascriptwebuser-input

Instructions for including dependencies from a globally installed npm package into a local package

I've noticed that although I have installed a few npm packages globally, none of them are showing up in any of my package.json files. What is the recommended npm command to automatically add these dependencies to all of my package.json files? ...

javascriptnode.jsjsonnpmpackage

Is it possible for two node scripts running on the same machine to interfere with each other's execution

In the scenario where a parent node file (such as an express server) spawns child nodes that execute computationally intense tasks, will these children cause blocking for the parent process? ...

javascriptnode.js