einazare
commented
3 years ago Hello there, @rjpruitt16 ,
Please go inside rollup.config.js and add replace everything with this:
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";
// library that helps you import in svelte with
// absolute paths, instead of
// import Component from "../../../../components/Component.svelte";
// we will be able to say
// import Component from "components/Component.svelte";
import alias from "@rollup/plugin-alias";
import fs from "fs";
const production = !process.env.ROLLUP_WATCH;
// configure aliases for absolute imports
const aliases = alias({
resolve: [".svelte", ".js"], //optional, by default this will just look for .js files or folders
entries: [
{ find: "components", replacement: "src/components" },
{ find: "views", replacement: "src/views" },
{ find: "assets", replacement: "src/assets" },
],
});
const indexTemplate = `<!--
=========================================================
* Notus Svelte - v1.0.0 based on Tailwind Starter Kit by Creative Tim
=========================================================
* Product Page: https://www.creative-tim.com/product/notus-svelte
* Copyright 2020 Creative Tim (https://www.creative-tim.com)
* Licensed under MIT (https://github.com/creativetimofficial/notus-svelte/blob/master/LICENSE.md)
* Tailwind Starter Kit Page: https://www.creative-tim.com/learning-lab/tailwind-starter-kit/presentation
* Coded by Creative Tim
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon.png" />
<link rel="stylesheet" href="/build/bundle.css" />
<link
rel="stylesheet"
href="/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css"
/>
<link rel="stylesheet" href="/assets/styles/tailwind.css" />
<title>Notus Svelte</title>
<script>
if (process === undefined) {
var process = { env: {<<process-env-status>>} };
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
<script defer src="<<live-preview-link>>/build/bundle.js"></script>
</head>
<body class="text-gray-800 antialiased">
<noscript>
<strong
>We're sorry but notus-svelte doesn't work properly without
JavaScript enabled. Please enable it to continue.</strong
>
</noscript>
<div id="app"></div>
</body>
</html>
`
if (production) {
fs.writeFileSync("./public/index.html",indexTemplate.replace("<<process-env-status>>","PRODUCTION: true").replace(/<<live-preview-link>>/g,"/notus-svelte"));
fs.writeFileSync("./public/200.html",indexTemplate.replace("<<process-env-status>>","PRODUCTION: true").replace(/<<live-preview-link>>/g,"/notus-svelte"));
fs.writeFileSync("./public/404.html",indexTemplate.replace("<<process-env-status>>","PRODUCTION: true").replace(/<<live-preview-link>>/g,"/notus-svelte"));
} else {
fs.writeFileSync("./public/index.html",indexTemplate.replace("<<process-env-status>>","").replace(/<<live-preview-link>>/g,""));
fs.writeFileSync("./public/200.html",indexTemplate.replace("<<process-env-status>>","").replace(/<<live-preview-link>>/g,""));
fs.writeFileSync("./public/404.html",indexTemplate.replace("<<process-env-status>>","").replace(/<<live-preview-link>>/g,""));
}
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.js",
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");
},
}),
// 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(),
// 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(),
// for absolut imports
// i.e., instead of
// import Component from "../../../../components/Component.svelte";
// we will be able to say
// import Component from "components/Component.svelte";
aliases,
],
watch: {
clearScreen: false,
},
};This should do the trick. Let me know if you still have issues.
Best, Manu
rjpruitt16
With this picture, it never asks for the index.html. I do not understand exactly what this means. Is the app being rendered server or client side. My guess was client side because we are not using express.js to render html. However, the application cannot run via a index.html lookup.
Version
latest
Reproduction link
https://github.com/creativetimofficial/notus-svelte/issues/4
Operating System
mac
Device
mac
Browser & Version
chrome
Steps to reproduce
npm run build open index.html in the browser
What is expected?
the app works fine with npm run dev, but npm run build does not trigger the application to load svelte
What is actually happening?
blank page
Solution
Additional comments