feat(editor): add simple preview without frontend

[elbotho]

work on the editor offline and without next running

run yarn dev in the editor and you can test both the web component and react (package) implementations as http://localhost:5173/

---

@CodingDive how problematic is removing this line? With this set the dev server does not work somehow 🤷

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
frontend	✅ Ready (Inspect)	Visit Preview	Oct 28, 2024 10:10am

[github-actions]

📦 Next.js Bundle Analysis for @serlo/frontend

This analysis was generated by the Next.js Bundle Analysis action. 🤖

This PR introduced no changes to the JavaScript bundle! 🙌

[CodingDive]

@CodingDive how problematic is removing this line? With this set the dev server does not work somehow 🤷

Believe it or not, this will break the build, or rather cause an error in the integrations that I haven't found a way to supress 😅

Maybe we can use two files
vite.config.lib.js - Configuration for building the packages
vite.config.dev.js - Config for running dev server

vite build --config vite.config.lib.js
vite --config vite.config.dev.js

Or modes / commands

export default defineConfig(({ command, mode }) => {
  if (command === 'build' && mode === 'lib') {
    return {
      ....
    }
  } else {
    return ... 
  }
})

Then pass the args in our package.json run scripts like this

vite build --mode lib

[elbotho]

@CodingDive would that work? 9ef60b4
Or even better: Can you tell me how I can check myself?

[CodingDive]

@CodingDive would that work? 9ef60b4

Works right now 🙌

Thank you!

[hejtful]

This is so nice 😍 Thank you, it will be very helpful in the long run

[hejtful]

@elbotho It would be great to have a preview for the editor rendered within an iframe as well, as that's how it's rendered for some LTI integrations. Would you prefer if we add it to this PR, or open a follow-up PR once this is merged?

[elbotho]

@elbotho It would be great to have a preview for the editor rendered within an iframe as well, as that's how it's rendered for some LTI integrations. Would you prefer if we add it to this PR, or open a follow-up PR once this is merged?

Good idea, no preference :)

I'm just waiting for a 👍 from @LarsTheGlidingSquirrel here before merging this to see if it works for him.

[LarsTheGlidingSquirrel]

Seems to work great! I think it will be really valuable for us to have during development. Thank you so much! <3