In this episode we'll setup chroxy and chrome remote interface. This is so we can control the chrome driver through our code and automate tasks like server side rendering or generating screenshots.
Setting up Chroxy
Let's begin this process by cloning down chroxy
git clone https://github.com/holsee/chroxy.git
Once we have it cd into the chroxy directory. Then let's compile the code.
mix do deps.get, compile
This will pretty much get all the dependencies and compile the code
Running Chroxy
We can run chroxy by using the mix run command
mix run --no-halt
This will start the chroxy service.
Setting up Chrome Remote Interface
We will use the elixir client library for Chrome Remote Interface, in mix.exs
defp deps do
[
#...
# For Chroxy
{:chroxy_client, "~> 0.1.0"},
{:chrome_remote_interface, "~> 0.1.0"},
#...
]
end
Now let's run the app using
iex -S mix
Working with Chrome Remote Interface
Now we will try and render a page using chrome
pid = ChroxyClient.page_session!(%{ host: "localhost", port: 1330 })
{:ok, _res} = RPC.Page.navigate(pid, %{
url: "https://www.artellectual.com"
})
{:ok, result} = RPC.Runtime.evaluate(pid, %{
expression: "document.documentElement.outerHTML"
})
# return the html
result["result"]["result"]["value"]
That's pretty much it! We can output the html from the rendered page using the above code. In the next episode we will explore why this won't work in a production environment.