Svelte framework on Phoenix

Phoenix Forum Questions / Help
, ,
1

Hi to all. I’m new to Elixir and Phoenix.

I’d like to use Svelte framework with Phoenix for a learning purpose project but I don’t know how to set things up.

Anyone here can help me with that, and maybe share how it’s like to use them together.

Thanks!

1 Like
2

To get started you should just need to install the svelte + svelte loader in the webpack pipeline of phoenix. Then use the client side component api to put components into the server side rendered html.

8 Likes
3

I’m also interested in it, but haven’t yet have the time to explore the solutions.

This link should give some hints though, you can then use the nodejs package to render the templates from the server side.

5

And here’s a demo: https://github.com/syfgkjasdkn/svelte-phoenix-demo

Relevant commit: https://github.com/syfgkjasdkn/svelte-phoenix-demo/commit/3102c4b12dfdf290819c9b4df6324dcb6c3211ad

7 Likes
6

I’d like to thank everyone here for the help.

I did the ajustments in Webpack following the demo provided and the template from Svelte (https://github.com/sveltejs/template-webpack/blob/master/webpack.config.js), which also set things like:

module.exports = {
	(...)
	resolve: {
		extensions: ['.mjs', '.js', '.svelte']

I’ve bumped into an error (Runtime Error “require is not defined”) in the browser that prevented requires() injection into the index.mjs file.
I was able to get things working by the solution provided in https://stackoverflow.com/questions/52366829/require-is-not-defined-using-webpack-and-yarn, which consists in including a especific rule for .mjs in the webpack.config.js like:

{
        test: /\.mjs$/,
        include: /node_modules/,
        type: "javascript/auto",
      },

If anyone could share some design patterns tips on how to best integrate phoenix templates with Svelte components I would greatly appreciate.

5 Likes