I am trying to add simple controller to view that uses preact component in ruby rails

Question

I am trying to add simple controller to view that uses preact component in ruby rails. It just shows hello world just a basic program just trying to use a preact component in rails.

There is not much available for such thing to try I have been searching for quite a time now but no luck. I am following this https://github.com/UseHover/preact-rails to perform this.

application.html.erb

   <title>Helloworld</title>
   <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>
  <body>
   <%= yield %>
   <%= javascript_pack_tag 'application' %>
  </body>

The view where I call the component.

<%= preact_component('Button', { type: 'submit', label: 'Get started!'}) %>

Package.json

{
   "name": "helloworld",
   "private": true,
   "dependencies": {
   "@rails/webpacker": "^4.0.7",
   "preact": "^8.5.2",
   "preact_ujs": "^0.1.1"
  },
   "devDependencies": {
   "webpack-dev-server": "^3.8.1"
 }

}

error:-

Webpacker can't find application in D:/Projects/Ruby Project/helloworld/public/packs/manifest.json. Possible causes:

You want to set webpacker.yml value of compile to true for your environment
unless you are using the webpack -w or the webpack-dev-server.
webpack has not yet re-run to reflect updates.
You have misconfigured Webpacker's config/webpacker.yml file.
Your webpack configuration is not creating a manifest.

Your manifest contains:

{
}
Extracted source (around line #10):


  <body>
  <%= yield %>
  <%= javascript_pack_tag 'application' %>

  </body>
  </html>

Answer 1

Try using Preact 10 instead of 8. preact-rails seems to be using 10 in their docs.

Answer 2

It can be easily done using CDN.

<h1>Render by Preact client library using h and render function</h1>
<div id="preact">

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/preact/8.5.2/preact.dev.js"> 
</script>

<script>
 var Component = window.preact.Component,
 h = window.preact.h,
 render = window.preact.render;

 var PreactApp = function (props){
 return h('h1',
 {className: ''},
 'Hello world!');
  }

 render(PreactApp(),document.getElementById("preact"));
 </script>

I am trying to add simple controller to view that uses preact component in ruby rails

Question

2 answers

solution1
1 2019-10-01 22:06:28

solution2
0 2019-11-14 07:40:09

I am trying to add simple controller to view that uses preact component in ruby rails

Question

2 answers

solution1 1 2019-10-01 22:06:28

solution2 0 2019-11-14 07:40:09

solution1
1 2019-10-01 22:06:28

solution2
0 2019-11-14 07:40:09