How should I build two svelte pages with rollup?

user_1422010 0
Viewed 605

I'm following the official Svelte for new developers blog post for my svelte app. It's working fine, and now I want to add a separate "admin" app. Except for interfacing the same database and being hosted on the same domain, it shares no components with my main app.

Would the best approach be to create a second svelte app and host it in a folder, or is there a way do to this in the same rollup?

npx degit sveltejs/template my-project-admin-page
svelte
2 Answers

Your rollup.config.js can return a an array instead, so you would get something like

export default [
  { ...config for normal app ...},
  { ...config for admin app ...}
]

I like to abstract some of the more common parts as well, in a project I am currently working on I have:

export default [
    getConfig('index'),
    getConfig('admin')
]

You could add extra parameters, the one here just points to the main entry point and uses the same name for the bundle

user_119561070

The best way to do this is using svelte-kit, but for simplicity reasons, once I used tinro and it was so good and simple, you can also use svelte-routing.

In this case, your code will be like:

<Route path="/">
  <a href="/admin">Go to admin</a>
  <h2>You are on main page</h2>
</Route>
<Route path="/admin">
  <a href="/">Back to tasks</a>
  <h2>You are on admin page</h2>
</Route>

tinro: https://github.com/AlexxNB/tinro

tinro-example: https://svelte.dev/repl/4bc37ff40ada4111b71fe292a4eb90f6?version=3.46.4

svelte-routing: https://github.com/EmilTholin/svelte-routing

user_129721980
Related