Develop Reference

TailwindCSS content files within conf

Problem: My tailwindcss config file does not recognise & interpret the CSS written within the components. It works fine for tailwindcss written in CSS files.
I am using Redwood.js.
In RedwoodJs, the tailwindCSS config file is stored at ./web/src/config/.
'./web/src/config/tailwind.config.js':
module.exports = {
content: [
"./web/src/components/**/*.{js,jsx,ts,tsx}",
"./web/src/pages/**/*.{js,jsx,ts,tsx}",
"./web/src/layouts/**/*.{js,jsx,ts,tsx}",
"./web/src/**/*.{js,jsx,ts,tsx}",
],
As per tailwindcss docs:
"Paths are relative to your project root, not your tailwind.config.js
file, so if your tailwind.config.js file is in a custom location, you
should still write your paths relative to the root of your project."*
Which is what I have done above. However, the classNames used within components are not transformed into CSS in the browser. What am I doing wrong?
SOLUTION EDIT:
Correct string to pass to content is:
module.exports = {
content: [
"./src/components/**/*.{js,jsx,ts,tsx}",
"./src/pages/**/*.{js,jsx,ts,tsx}",
"./src/layouts/**/*.{js,jsx,ts,tsx}",
"./src/**/*.{js,jsx,ts,tsx}",
],
I fail to understand why the web folder is taken as root folder, when it is one-level within the repo. The only justification I can think of is that webpack is somewhere setting the core dir for postcss?
I would love some insight/ feedback into how the working solution is working, when it seems to go against the docs at TailwindCSS...

Next.js - best way to serve static JS from a node module's "dist" folder

I'm working with an application that uses Tesseract (OCR) to read text from images.
I would like to take some JS files from node_modules/tesseract.js/dist and make them downloadable in the browser.
I know I can just copy the files to ./public and next.js will serve it statically from there, but then if I update my version of Tesseract, I may need to update those files as well. So maintenance becomes a problem.
My 1st thought is to customize my webpack config to copy the files from node_modules/tesseract.js/dist to ./public/tesseract (or something like that). That would make sure the files get re-copied if I update Tesseract. But I'm not particularly savvy with webpack and haven't figured out how to do that yet.
My 2nd thought was to "proxy" the retrieval of the JS file's content and just make the content available as a "page" in next.js (but this seems super hacktastic).
I feel like this is something that shouldn't be so complicated ... but I've not been able to figure it out myself yet.
Thanks in advance!

Yup agreed, updating your server to serve a node_modules path sounds a bit dangerous.
I personally would just copy over these files with webpack like you mentioned.
Here are the docs on Next.js on how to set up a custom webpack config.
next.config.js
const CopyPlugin = require("copy-webpack-plugin");
module.exports = {
webpack: (config) => {
// append the CopyPlugin to copy the file to your public dir
config.plugins.push(
new CopyPlugin({
patterns: [
{ from: "node_modules/tesseract.js/dist", to: "public/" },
],
}),
)
// Important: return the modified config
return config
}
};
I purposefully didn't include the public/tesseract path, I'm not sure if the CopyPlugin will automatically generate missing directories if they don't exist at build time.

Set up webpack to pull JS file from local rather than via HTTP

webpack.config.js pulls remote js for Module Federation.
plugins: [
new ModuleFederationPlugin({
remotes: {
'mfe1': "mfe1#http://xxxxxxxxxx.com/remoteEntry.js"
}
})
],
How can I use a local JS file in remotes or in addition to remotes? I have a simple react.js library in the other folder, with ./dist/browser/remote-entry.js file in it. I cannot publish to npm, so I'm trying to load it from local. Would it be something like:
plugins: [
new ModuleFederationPlugin({
remotes: {
'mfe1': "../../myproject/dist/browser/remoteEntry.js"
}
})
],

The remotes entry is supposed to be a url that is accessible during run-time, not build-time. If it was only necessary during build-time, it would automatically imply that the remoteEntry gets bundled, which defeats the purpose of Webpack Module Federation (WMF for short).
You say:
webpack.config.js pulls remote js for Module Federation.
But I'm not sure what that is supposed to mean. Webpack does not "pull" the remote files at all. It tells the final build where to look, so that when your code (i.e. bundle.js) actually executes, it knows from where to load modules dynamically.
This means that, in order for WMF to work, you still need to serve the file from your web server.
You primarily have two choices:
If you don't want dynamic loading of modules, just build your project without WMF.
If you do want dynamic loading, then you need to tell webpack that remotes url. Ideally, you can get the actual server address from process.env, which you can provide via dotenv (or through many other means):
webpack.config.js
// ...
module.exports = {
// ...
plugins: [
new ModuleFederationPlugin({
remotes: {
'mfe1': `mfe1#${process.env.REMOTE_HOST || 'http://localhost:8080'}/remoteEntry.js`
}
})
],
// ...
};
.env
REMOTE_HOST=http://xxxxxxxxxx.com
Also, you might want to consider this article on how to deploy a WMF build.

How can I set production build path in vue-cli?

I'm using the vue-cli tool to develop vuejs apps, and I'm developing a server too, so i want to build the /dist folder in my server to send it to the browser as static, but I don't even know where the /dist folder is.
There is a webpack.prod.config.js file (I think is the webpack config for production) and in the path-output field I tried to wirte the path but didn't work.

/dist is just a default setting by VueJS. If you want to modify this : as the documentation from VueJS states :
Always use outputDir instead of modifying webpack output.path.
Create a vue.config.js as an optional config file that will be automatically loaded by #vue/cli-service if it's present in your project root (next to package.json).
The file should export an object containing options:
// vue.config.js
module.exports = {
// options...
}
As otheres already stated in the comments, use outputDir to specify the directory where the production build files will be generated in when running vue-cli-service build. Note the target directory will be removed before building (this behavior can be disabled by passing --no-clean when building).
// vue.config.js
module.exports = {
outputDir : ''
}

Vue CLI 3 prevent cache busting for certain output files

I'm building a chrome extension with vue cli 3. I've got the basics working well, but I was hoping to also run my content and background javascript through the build process instead of just putting them into my public folder and copying it into dist. This is mostly just so I can use import/export to clean up my file structure.
I was able to add them as new "pages" in the vue config and even without the html template file, they get built properly and moved into dist.
The problem is, they then get the cache busting string appended to their filename so I'm unable to reference them in the extension manifest. For example, background.js becomes background.d8f9c902.js
Is it possible to tell the vue config that certain "pages" should not get the cache busting? The documentation here does not seem to expose that as a parameter.
Thanks in advance!

Filename hashing can be disabled for all files:
https://cli.vuejs.org/config/#filenamehashing
It works in my case using below vue.config.js:
// vue.config.js
module.exports = {
lintOnSave: true,
filenameHashing: false
}