Code reloading

[veelenga]

Currently to see code changes we need to restart a web server. Are there plans/ideas regarding code reloading, so we would need just to reload a page, but do not restart a server ? Is it even possible to do for now ?

PS: thanks for a great work on Kemal!

[sdogruyol]

@veelenga since ecr is compiled i don't think there's a way to update the view without restarting the process 😢

[ghost]

sentry by @samueleaton might be of help — it does restart the process, but it's something.

[faustinoaq]

Hello!

I'm playing with Kemal, WebSockets and Sentry.
I can't do code reloading with ECR. I think maybe using as dynamic library.

Instead of ECR I'm using client side rendering (exist a lot of options EJS, Handlebears etc). EJS has similar syntax to ECR.

This could be good only for fast development environment, when turn on production the views can be converted to plain HTML and then compiled to ECR (if is a static site). If is a dynamic one then client rendering is the way.

Basically I'm using File.read and passing data as json because each template recompiling is so heavy even using Sentry.

see: A example using EJS

[faustinoaq]

@veelenga Seems that Liquid.cr and Crustache are engines that support template render without recompile.

However, Kilt doesn't support Liquid yet and the Crustache engine inside Kilt use Mustache.embed instead of Crustache.render

[huacnlee]

https://github.com/samueleaton/sentry

src/sentry.cr

require "sentry"

sentry = Sentry::ProcessRunner.new(
  process_name: "Kemal Dev",
  build_command: "crystal build ./src/my_app.cr -o ./bin/my_app",
  run_command: "./bin/my_app",
  files: ["./src/**/*.cr", "./src/**/*.ecr"]
)
sentry.run

after run dev by:

$ crystal run src/sentry.cr

🤖  Your SentryBot is vigilant. beep-boop...
🤖  watching file: ./src/my_app/topics.cr
🤖  watching file: ./src/my_app.cr
🤖  compiling my_app...
🤖  starting my_app...
[development] Kemal is ready to lead at http://0.0.0.0:3000

[faustinoaq]

@huacnlee good 👍

I created a shard to use sentry embedded in my code without external sentry.cr:

require "kemal"
require "sentry-run"

get "/" do
  "Hello world"
end

Sentry.config(files: ["src/app.cr"])

Sentry.run do
  Kemal.run
end

https://github.com/faustinoaq/sentry-run

[samueleaton]

Sorry I was on hiatus for the last month or so.

I'm thinking of adding the ability to add a hot-reloading client side build (for webpack or Gulp or whatever) in Sentry. Something similar to what webpack-dev-server or the phoenix framework (Elixir) do. But the trick is to keep sentry light and simple to use without too much feature bloat.

If you think of anything you'd like to add in sentry or any shortcomings, feel free to create an issue.

EDIT: I made a suggestion (as you can see below in the referenced issue) for a way we can add our own tooling into Kemal. This would allow us to inject things into the html to achieve features like webpack-dev-server for hot reloading.

[huacnlee]

@faustinoaq How about integrated that into Kemal by using Compile-time flags?

For example:

module Kemal
  # Overload of self.run with the default startup logging
  def self.run(port = nil)
    {% if flag?(:release) %}
    kemal_run(port)
    {% else %}
    Sentry.run do
      kemal_run(port)
    end
    {% end %}
  end

  def self.kemal_run(port = nil)
    # original Kemal run implement
  end
end

[faustinoaq]

@huacnlee sound great!

In fact The fist version of sentry-run was named kemal-sentry 😄 but I changed because I think that Sentry could be used in many other crystal programs, not only Kemal.

[kazzkiq]

If you have Node.js installed (not uncommon even for backend devs nowadays) you can simply run the instructions bellow (inside your project root directory, of course):

1. npm i -g nodemon
2. nodemon --exec "crystal run" src/{YOUR_MAIN_FILE}.cr

Where {YOUR_MAIN_FILE} is the filename you use to run your app.

Now every time you make a change in any file inside your project, nodemon will automatically detect and re-build your project. Works like a charm with Kemal.

[karmakaze]

Putting the following in your package.json let's you run npm start or npm build:

{
  ...
  "scripts": {
        "dev": "node_modules/.bin/nodemon --exec \"crystal run\" src/{YOUR_MAIN_FILE}.cr",
        "start": "npm run dev",
        "build": "crystal build src/{YOUR_MAIN_FILE}.cr"
  },
  "dependencies": {
        "nodemon": "^1.18.3"
  },
  "nodemonConfig": {
        "ignore": ["node_modules/*", "lib/*"]
  }
  ...
}

[szabgab]

Reading this issue I don't understand what is the recommended way to auto-reload the server-side part of the application as I edit the files?
I did not see any recommendation on the main web site of Kemal.
I just tried sentry and it did not work for me ( samueleaton/sentry#59 )

[straight-shoota]

entr (http://eradman.com/entrproject/) is often recommended. Haven't used it myself, though.

[Blacksmoke16]

@szabgab If you have node installed you can use nodemon. The simplest usage would be like: nodemon --exec crystal run --watch src src/main.cr, which would rebuild src/main.cr on changes to src/. It's pretty configurable as well if you want to customize etc.

[tsujp]

Using entr:

while sleep 0.25; do
  tree -fiA --prune --noreport src | entr -rd crystal run src/app.cr
done

[perfecto25]

Using entr:

while sleep 0.25; do
  tree -fiA --prune --noreport src | entr -rd crystal run src/app.cr
done

awesome, this works, thanks