-
|
GET ------------- Response header -------------- ------------- Request Header --------------- |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 15 replies
-
|
Looks like you're using NGinx? Are you setting up your cache through that? Lucky doesn't handle any cache out of the box on this stuff, it's more just whatever you configure. |
Beta Was this translation helpful? Give feedback.
-
|
I tried for an hour and kept asking GPT4o, but still couldn't solve this issue, could you please give a working example of webpack.mix.js? e.g. |
Beta Was this translation helpful? Give feedback.
-
|
That example I gave is a working example. I pulled that directly from my app in production which uses that. You just have to make sure that your |
Beta Was this translation helpful? Give feedback.
-
|
Sorry, still have no idea about how to do this use mix after do lots of investigate. But, help with AI, I switch my project from unmaintained laravel mix to vite, it works!, this is the commit. Some concerns:
Following is the file in Following is the generated files in dist when local development, use Following is the file in dist folder when production (
|
Beta Was this translation helpful? Give feedback.
-
|
If you're going to use In your Lucky::AssetHelpers.load_manifest("public/manifest.json", use_vite: true)This will use And here's my import { defineConfig } from 'vite'
import autoprefixer from 'autoprefixer'
import tailwindcss from 'tailwindcss'
import inject from '@rollup/plugin-inject'
const isWatch = process.argv.includes('--watch');
export default defineConfig(({ command, mode }) => ({
plugins: [
inject({
htmx: 'htmx.org'
}),
],
css: {
postcss: {
extract: true,
plugins: [
tailwindcss(),
autoprefixer()
],
},
},
server: {
watch: {
include: ['**/src/js/**', '**/src/css/**'],
},
},
build: {
outDir: 'public',
emptyOutDir: false,
manifest: true,
assetsInlineLimit: 0,
sourcemap: 'inline',
minify: 'esbuild',
rollupOptions: {
input: [
'src/js/app.ts',
'src/css/main.css',
],
output: {
entryFileNames: ({ name }) => {
return (command === 'build' && !isWatch) ? 'js/[name].[hash].js' : 'js/[name].js';
},
assetFileNames: ({ name }) => {
const filename = (command === 'build' && !isWatch) ? '[name][hash][extname]' : '[name][extname]';
if (/\.(gif|jpe?g|png|svg)$/.test(name ?? '')) {
const path = name.replace(/.*\/(src\/images|node_modules\/)(.*)?(\/.*\..*)/, '$2').replace(/^\//, '');
return ['images', path, filename].filter((s) => s.length > 1).join('/');
}
if (/\.css$/.test(name ?? '')) {
return `css/${filename}`;
}
return filename;
},
},
},
},
}));And the Or, alternatively you can try this shard https://github.com/wout/lucky_vite but I haven't used it. |
Beta Was this translation helpful? Give feedback.
-
|
Haha, I knew it, I have made a new wheel, that not so good one, will check tomorrow. Thanks you very much. |
Beta Was this translation helpful? Give feedback.
-
|
Okay, changes to use I found use vite generated js/css is more small than mix. old mix: new vite: One more question, how you handle use fingerprinted assets file in app.js? currently, I read the config file in vite.config.js, and export it to app.js use a virtual module, then use it in app.js like this way, is there a better way to do this? |
Beta Was this translation helpful? Give feedback.
-
|
I haven't had to pull in an external wasm before. Normally your JS files you're importing or requiring would be in the same directory so you'd use But I can see how you might have to run a build that generates a wasm and you need to pull that... I'm just not sure of the best way. As you said, I'm more of backend than frontend dev 😂 |
Beta Was this translation helpful? Give feedback.
-
|
okay, thanks, that wasm file basically won't change.(unless stork is updated, but this project is unmaintained, :sad:), the file I have to add fingerprint to is, the index file, e.g. Do you consider extract the markdown doc of lucky website out of crystal file into markdown instead? I thought i can contribute, as you can see in above link, i wrote and save markdown use |
Beta Was this translation helpful? Give feedback.
If you're going to use
vite, then you will need to setup Lucky to use it.In your
src/app.cr..This will use
public/manifest.jsonin the vite format instead ofmix-manifest.json.And here's my
vite.config.jsfrom a Lucky project I have in production. Just update whatever you need