I am trying to setup an app with svelte and taiwlind.
I have the following
"scripts": {
"watch:tailwind": "postcss public/tailwind.css -o public/index.css -w",
"build:tailwind": "cross-env NODE_ENV=production postcss public/tailwind.css -o public/index.css",
"build": "npm run build:tailwind && rollup -c",
"start": "sirv public",
"serve": "sirv public -p 5000",
"dev": "concurrently \"rollup -c -w\" \"npm run watch:tailwind\"",
"autobuild": "rollup -c -w",
},
postcss.config.js
module.exports = () => ({
plugins: [
require("tailwindcss"),
require("autoprefixer")
],
});
rollup.config.js
import svelte from "rollup-plugin-svelte";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import livereload from "rollup-plugin-livereload";
import { terser } from "rollup-plugin-terser";
import sveltePreprocess from "svelte-preprocess";
import typescript from "@rollup/plugin-typescript";
const production = !process.env.ROLLUP_WATCH;
function serve() {
let server;
function toExit() {
if (server) server.kill(0);
}
return {
writeBundle() {
if (server) return;
server = require("child_process").spawn(
"npm",
["run", "start", "--", "--dev"],
{
stdio: ["ignore", "inherit", "inherit"],
shell: true,
}
);
process.on("SIGTERM", toExit);
process.on("exit", toExit);
},
};
}
export default {
input: "src/main.ts",
output: {
sourcemap: true,
format: "iife",
name: "app",
file: "public/build/bundle.js",
},
plugins: [
svelte({
// enable run-time checks when not in production
dev: !production,
// we'll extract any component CSS out into
// a separate file - better for performance
css: (css) => {
css.write("bundle.css");
},
preprocess: sveltePreprocess(),
}),
// If you have external dependencies installed from
// npm, you'll most likely need these plugins. In
// some cases you'll need additional configuration -
// consult the documentation for details:
// https://github.com/rollup/plugins/tree/master/packages/commonjs
resolve({
browser: true,
dedupe: ["svelte"],
}),
commonjs(),
typescript({ sourceMap: !production }),
// In dev mode, call `npm run start` once
// the bundle has been generated
!production && serve(),
// Watch the `public` directory and refresh the
// browser on changes when not in production
!production && livereload("public"),
// If we're building for production (npm run build
// instead of npm run dev), minify
production && terser(),
],
watch: {
clearScreen: false,
},
};
and tailwind.cofig.js
module.exports = {
purge: ["./src/**/*.svelte", "./src/**/*.html"],
theme: {
extend: {},
},
variants: {},
plugins: [],
future: {
purgeLayersByDefault: true,
removeDeprecatedGapUtilities: true
},
};
when I turn on the server, it build my files in public, it say started server on port 5000, but when I visit the page, it say
This localhost page can’t be found
I do see the log in the console but they all show
Your application is ready~!
- Local: http://localhost:5000
- Network: Add
--hostto expose────────────────── LOGS ──────────────────
[18:22:18] 404 ─ 2.21ms ─ /
I can't find the problem