We Keep Coding

how to build and "Vite" "lit-ts" project as a static website

I created a project using Vite Lit Element Typescript. development server is working fine.
however when I run npm run build .It only out put complied js file to /dist folder No html and css files.
So how can I get the full static files. just like we get in ReactJs.
sample Vite project link
vite guide

That is because the lit-ts template for vite has a config that's building for library mode:
export default defineConfig({
build: {
lib: {
entry: 'src/my-element.ts',
formats: ['es'],
},
rollupOptions: {
external: /^lit/,
},
},
})
You can remove that config and the build command will produce all the assets in /dist directory.
export default {}

How to debug a Typescript library compiled with Rollup in a main project

I've been spending some time trying to figure out the follow scenario:
I got two projects, one is a library of components and the other one the main project which consumes the library. When I develop a new component I do as usual following a TDD process and at the end I do some case scenarios on storybook that I expect the component will behave under certain circumstances, however, one thing is the desirable behaviour and the other how will be the functionality in a real integration environment. For this case I've been trying to build the source maps for the library in order to debug it locally when its running on the main project.
The library is developed with typescript so I'm compiling it with rollup using the follow configuration:
rollup.config.js
import peerDepsExternal from "rollup-plugin-peer-deps-external";
import resolve from "#rollup/plugin-node-resolve";
import commonjs from "#rollup/plugin-commonjs";
import typescript from "rollup-plugin-typescript2";
import postcss from "rollup-plugin-postcss";
import image from "#rollup/plugin-image";
import babel from "rollup-plugin-babel";
const cssUrl = require("postcss-url");
const packageJson = require("./package.json");
const GLOBALS = {
react: "React",
"react-dom": "ReactDOM",
loadash: "lodash"
};
const isDev = process.env.NODE_ENV === "development";
export default {
input: "src/index.ts",
external: Object.keys(GLOBALS),
output: [
{
file: packageJson.main,
format: "cjs",
sourcemap: true,
// globals: global variable names of external dependencies
globals: GLOBALS
},
{
file: packageJson.module,
format: "esm",
sourcemap: true,
// globals: global variable names of external dependencies
globals: GLOBALS
}
],
plugins: [
peerDepsExternal(),
resolve(),
commonjs(),
babel({
exclude: "node_modules/**",
plugins: ["external-helpers"]
}),
typescript({ useTsconfigDeclarationDir: true }),
postcss({
modules: false,
extract: true,
sourceMap: true,
minimize: isDev ? false : true,
plugins: [cssUrl({ url: "inline" })]
}),
image()
]
};
When I execute npm run build it generates both compiled bundles for ESM and CommonJS and I can debug directly through the **index.esm.js" file directly but as a compiled version of the code is generated, it's harder to debug it setting the breakpoints and doing the inspection with a version of the code ugly and minified so I was wondering if I can take advantage of source maps files for this matter. For the root project it works like a charm but when it comes to use it within a generated code for the library I was not able to make it.
This is the dist folder generated:
The index.esm.js file has all the code compiled for every single component and at the bottom the follow line:
//# sourceMappingURL=index.esm.js.map
Pointing out that the sourcemapping corresponds to the index.esm.js.map. Within this file there are an array of mapping source files pointing to the many components inside the library, all of them prefixing with ../src/elements/<component_name> so as long as the files are set up on the relative map of index.esm.js.map that is node_modules/library-components/src/elements/... the browser should be able to map correctly these files but this is not the case since every time I launch the app this is what I see on the sources tab:
So neither src folder with the mapping source files or any source files corresponding with the library are available on the sources tab but I can see that the browser is able to detect the source map file for the index.esm.js that is pointing to the existing index.esm.js.map that we described but that's not what I really want to but the source maps mapping to every each component as I stated before. So my question is, it's possible to compile with rollup generating a bundle with the source maps for every component in a legible way in order to debug the components more easily and be the browser able to detect them instead of using the existing index.esm.js?
I was trying to perform several workflows with no success like running the tsc compiler that generates the source maps for every component but the problem is that in the process I need to generate also the bundles for the assets that rollup do using postcss and images for that purpose, otherwise I cannot launch the perform since the main app is not able to map correctly the asset files.
I don't know if at the end I explain myself very well in this topic but I think it's a pretty common scenario for those who works with several project instead of a monorepo and need continuously test and seek for potential errors in an integration env for the components inside of a third-party library.
Anyone that can throw some light on this topic?
Thanks in advance!

Webpack change import path for a specific package

Let's assume, we do have few js libs, that installed into our bundle.
And, for some reason, I need to use a library from node_modules of a library.
I can do import it via
import thing from 'somelib/node_modules/thing';
And I want to do just:
import thing from 'thing';
But behind the scenes, webpack will know - the path should be 'somelib/node_modules/thing'
How can I change/override a specific import path in my webpack config file, so my node will bring me a package from the destination that I want?

I think you are looking for resolve.alias
https://webpack.js.org/configuration/resolve/#resolve-alias

In your webpack config, specify the resolve.modules
This example from the webpack documentation adds the "src" folder.
module.exports = {
//...
resolve: {
modules: [path.resolve(__dirname, 'src'), 'node_modules']
}
};
Or if you really don't want this affecting your other entry points, you could create separate webpack configs. (They can still import settings from a primary file) that allows you to set resolve.aliases and resolve.modules independently for each entry point.

Unable to use material design icons in vuetify

I install icons css using npm install material-design-icons-iconfont and it is available in node modules. After i build, the below woff files available in dist
Material-design-icons.css
/* For IE6-8 */
src: local("Material Icons"), local("MaterialIcons-Regular"),
url("./fonts/MaterialIcons-Regular.woff2") format("woff2"),
url("./fonts/MaterialIcons-Regular.woff") format("woff"),
url("./fonts/MaterialIcons-Regular.ttf") format("truetype");
all the three woff files shows 404. I verified in dist folder, i can see all those files in static/fonts/.woff.
In browser console also `localhost:8000/static/fonts/.woff. All the file names and paths are correct, but still see 404 error in console.

Afetr NPM installation, why not follow the Vuetify documentation by importing it in your main.js or app.js file.
// main.js
import 'material-design-icons-iconfont/dist/material-design-icons.css'
// Ensure you are using css-loader
Vue.use(Vuetify, {
iconfont: 'md'
})
But the easiest way is just to include the CDN link:
<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">

There are multiple material icon packages flying around. There are also multiple formats, SVGs and what not. It is easy to get confused. Assuming you have a standard vuetify configuration and your goal is to have a locally installed font because you don't like injecting foreign substance to your head, then following should work:
Eliminate the external library
First edit your public/index.html and comment out the #mdi import. This line also gives us a clue to which package vuetify is expecting.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#mdi/font#latest/css/materialdesignicons.min.css">
Install your local dependency
Then in your project folder, install the #mdi / font package.
yarn add #mdi/font
Import into Vue
Then, finally we need to get this newly download package into our application. You can import anywhere, but it's good practice to keep vuetify related things in the vuetify configuration file which is located at plugins/vuetify.js
import "#mdi/font/css/materialdesignicons.min.css";
Let Vuetify know all about it
and make sure to export material design as the preferred icon font for your vuetify project.
Inside plugins/vuetify.js
export default new Vuetify({
icons: {
iconFont: "md",
},
});
You might want need to rebuild your project. Have a great day.
P.S # points to your node_modules folder.

Have you checked you have css-loader in you webpack config?
module: {
loaders: [
{ test: /\.css$/, loader: "css-loader" }
]
}

bundling multiple js files

in react using webpack every js files is bundle into a single bundle.js , for my normal html , css, js application for example , i am having 6 libraries. for an example consider
i am using jquery and bootstrap min versions. so if i reference two files the request will be two. so how can i make it into a single file. So there will be a single request.
like when i checked the file size is about in kb's and the request is processed within less that 1 or 2 seconds , like the chrome dev tools shows the time for to load also it parrallely loads the two files.
But how can i bundle the two librarys using webpack and get a single file that i can refer in my application.
i am a beginner to webpack

You need to import them in your entry point file and Webpack will handle the bundling. As you have worked with React, I assume you have basic command line skills.
You can read the Getting Started guide which bundles Lodash like how you are trying to bundle jQuery and Bootstrap.
First of install, ensure that you are installing jQuery, Bootstrap, and any other libraries using npm (or yarn, if you prefer):
# Install Webpack as a dev dependency
npm install webpack webpack-cli --save-dev
# Install dependencies (I've added Popper.js as Bootstrap requires it)
npm install jquery bootstrap popper.js
Create a folder called src and a file inside there called index.js. This is your entry point and Webpack will look for this file unless configured differently. Import the libraries like this:
import $ from 'jquery'
import 'bootstrap'
// Do something with jQuery
$(document).ready(() => console.log('Hello world!'))
Then run Webpack using npx:
npx webpack
A file named main.js should be created in a folder called dist that contains the bundled code. This is your output file. You can use a <script> tag in your HTML file to load this JavaScript:
<!-- assuming your index.html is in the dist folder -->
<script src='main.js'></script>
Once you get here, you can explore more advanced things like importing Bootstrap components individually, minifying code, multiple bundles, transpiling TypeScript, etc.
You will likely need to add a Webpack configuration file very soon as there is only so much that can be done using zero-config mode.

Good practice is to keep two sepearate bundles for the application logic and external libraries and in webpack this can be achieved by the following code,
app.js - appliation index file,
vendors.js - import all external libraries in this file
entry: {
app: './src/app.js',
vendors: './src/vendors.js'
}
To get a single file, import vendors.js file inside app.js file and give entry key in webpack as
entry: './src/app.js'

Let us assume that you have the files in src directory. You can merge multiple files by specifying them in webpack.config.js to have a single named file as an output. I hope this is what you are looking for.
const path = require('path');
module.exports = {
entry: {
'bundle.js': [
path.resolve(__dirname, 'src/file1.js'),
path.resolve(__dirname, 'src/file2.js')
]
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [{
exclude: /node_modules/
}]
}
};
As above, the two files "file1.js" and "file2.js" will be combined into a single file "bundle.js" and stored in "dist" directory.
You can also exclude node_modules by specifying a rule in module object of webpack configuration.