# Development Process for Working with Genie and Javascript REST API

**URL:** <https://discourse.julialang.org/t/development-process-for-working-with-genie-and-javascript-rest-api/41336>\
**Category:** General Usage\
**Tags:** question\
**Created:** [June 13, 2020, 6:20pm UTC](https://discourse.julialang.org/t/development-process-for-working-with-genie-and-javascript-rest-api/41336 "2020-06-13T18:20:21Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![whenning](https://avatars.discourse-cdn.com/v4/letter/w/9fc348/32.png) [@whenning](https://discourse.julialang.org/u/whenning)\
**Post date:** [June 13, 2020, 6:20pm UTC](https://discourse.julialang.org/t/development-process-for-working-with-genie-and-javascript-rest-api/41336/1 "2020-06-13T18:20:21Z")

</div>

**Describe the Goal**  
I am attempting to call my local Genie web server using a REST API in javascript. Is this an appropriate development process?

The server works great when I call something like `http://127.0.0.1:8000/` directly in the browser. However, when I try to access the running server using my javascript REST API, I get an error:

`404 Not Found Not found because of proxy error: Error: connect ECONNREFUSED 127.0.0.1:8000`

**To reproduce**  
For this simple example, I am using CORS anywhere  
`https://robwu.nl/cors-anywhere.html http://127.0.0.1:8000`

---

<div class="post-metadata">

**Author:** ![mthelm85](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/mthelm85/32/224164_2.png) [@mthelm85](https://discourse.julialang.org/u/mthelm85)\
**Post date:** [June 13, 2020, 6:57pm UTC](https://discourse.julialang.org/t/development-process-for-working-with-genie-and-javascript-rest-api/41336/2 "2020-06-13T18:57:11Z")

</div>

I think it would be helpful if you could describe the goal more explicitly. What does your Genie web server do? Do you have a front-end GUI for your app? Is your REST API written in Node.js?

I can see calling a Genie API with JavaScript from your front-end app but I’m having trouble thinking of a use case for a Node.js API to call a Genie.jl API.

I would post the code from your Genie server, or an equivalent minimal working example, here and I think that will give us a better idea of what you’d like to do.

---

<div class="post-metadata">

**Author:** ![whenning](https://avatars.discourse-cdn.com/v4/letter/w/9fc348/32.png) [@whenning](https://discourse.julialang.org/u/whenning)\
**Post date:** [June 13, 2020, 7:26pm UTC](https://discourse.julialang.org/t/development-process-for-working-with-genie-and-javascript-rest-api/41336/3 "2020-06-13T19:26:10Z")

</div>

Thank you for your quick reply.

I create my front end using React and I run a Julia web server in a Docker container on Google Compute Engine. I currently use Joseki.jl to run the web server and it works great, but Genie seems like a bigger project so I thought I would check it out.

The biggest pain of my development stack is that I every time I make a change to my Julia code, I have to push it all the way out to my Kubernetes cluster before I can test it. Awful. So I am trying to figure out a more efficient approach.

This is what I am trying to understand. What is the most simple way for me to make a `fetch` from React while developing? So that I can go painlessly back and forth between the computational and interface development environments.

I do not use any Node.js. I host my app on Firebase. If this is not the right way of thinking about this development process, I appreciate advice

_Create a simple function to test a POST API call_  
_ **routes.jl** _

```julia
using Genie, Genie.Router, Genie.Renderer.Json, Genie.Requests
using HTTP

Genie.config.run_as_server = true
Genie.config.cors_allowed_origins = ["*"]

route("/random", method=POST) do
  data = jsonpayload()
  dim = parse(Int, data["dim"])
  num = parse(Int, data["num"])
  (:randomdata => rand(dim,num)) |> json
end

Genie.startup()

```

\*Then I try and call the web server from my javascript app. Maybe this is not possible, and I am not experienced here so likely mistakes. The CORS stuff is not clear to me. \*

_ **App.js** _

```julia

  const proxyurl = "https://cors-anywhere.herokuapp.com/";
  const url = 'http://127.0.0.1:8000/random'
  let data = {
    dim: '1',
    num: '3'
  }
// The parameters we are gonna pass to the fetch function
let fetchData = { 
    method: 'POST', 
    body: data,   
    headers: new Headers()
}
fetch(proxyurl + url)
.then(function() {
    // Handle response you get from the server
    console.log('hi data')
})
.catch(()=>console.log('Wade- you cant access the url response'));

```

---

<div class="post-metadata">

**Author:** ![whenning](https://avatars.discourse-cdn.com/v4/letter/w/9fc348/32.png) [@whenning](https://discourse.julialang.org/u/whenning)\
**Post date:** [June 17, 2020, 2:15pm UTC](https://discourse.julialang.org/t/development-process-for-working-with-genie-and-javascript-rest-api/41336/4 "2020-06-17T14:15:49Z")

</div>

@mthelm85  
What does your development process look like? How do you call Julia from your GUI’s? Where do you host your applications?

---

<div class="post-metadata">

**Author:** ![mthelm85](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/mthelm85/32/224164_2.png) [@mthelm85](https://discourse.julialang.org/u/mthelm85)\
**Post date:** [June 17, 2020, 2:27pm UTC](https://discourse.julialang.org/t/development-process-for-working-with-genie-and-javascript-rest-api/41336/5 "2020-06-17T14:27:48Z")

</div>

Here’s a sample (this is on an older version of Genie, not sure if this still works but I can confirm it worked great at the time):

**Genie.jl API**

JuliaAPI/src/ ApiExample.jl:

```julia
using Genie
using Genie.Router
import Genie.Router: route
import Genie.Renderer: json
include("Sum.jl")

function launch_server(port)
    Genie.config.run_as_server = true
    Genie.config.server_host = "0.0.0.0"
    Genie.config.server_port = port
    Genie.config.cors_allowed_origins = ["*"]

    route("/addxy") do
        x = parse(Int, get(@params, :x, "0"))
        y = parse(Int, get(@params, :y, "0"))
        (:answer => addxy(x,y)) |> json
    end

    Genie.startup()
end

launch_server(parse(Int, ARGS[1]))

```

JuliaAPI/src/ Sum.jl:

```julia
function addxy(x::Int64, y::Int64)
    return sum([x,y])
end

```

**Vue.js frontend**

The relevant code is just this:

```javascript
import axios from 'axios'

export default {
  name: 'HelloWorld',
  data: () => ({
    x: null,
    y: null,
    answer: null
  }),

  methods: {
    async getAnswer() {
      try {
        const res = await axios.get('https://cors-anywhere.herokuapp.com/https://julia-api-example.herokuapp.com/addxy', {
          params: {
            x: this.x,
            y: this.y
          }
        })
        this.answer = res.data.answer
      } catch (err) {
        alert(err)
      }
    }
  }
}

```

All of the code is in these two GitHub repos:

[https://github.com/mthelm85/JuliaAPI](https://github.com/mthelm85/JuliaAPI)

[https://github.com/mthelm85/JuliaAPIClient](https://github.com/mthelm85/JuliaAPIClient)

Also, I pushed both the API and the GUI to free Heroku dynos so you can test out the front-end here:

[https://julia-api-client.herokuapp.com/](https://julia-api-client.herokuapp.com/)

Since they are free dynos, they both go into “sleep mode” until someone hits the URL. It may take a few minutes for the GUI to “wake up” and then once you try to compute a sum it will reach out to the Julia API and it will also have to “wake up.” I also just tried it out and for the first few minutes it was giving me a CORS error which, oddly enough, stopped happening after a few minutes (it’s working fine at the time I’m writing this but will probably not work right for the first few minutes that you try). This was just a proof of concept so I never tried to work out the bugs (of which there appear to be many 😆).

---

<div class="post-metadata">

**Author:** ![fonsp](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/fonsp/32/222349_2.png) [@fonsp](https://discourse.julialang.org/u/fonsp)\
**Post date:** [June 17, 2020, 2:46pm UTC](https://discourse.julialang.org/t/development-process-for-working-with-genie-and-javascript-rest-api/41336/6 "2020-06-17T14:46:14Z")

</div>

You can’t use _CORS anywhere_ to proxy your localhost (127.0.0.1) because _CORS anywhere_ can only connect you to addresses on the web. The address 127.0.0.1 is only accessible inside your machine.

Why are you using a CORS proxy? Is the CORS header not working? You can use the Network tab in the chrome/ffox dev tools to check which headers you received.

---

<div class="post-metadata">

**Author:** ![fonsp](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/fonsp/32/222349_2.png) [@fonsp](https://discourse.julialang.org/u/fonsp)\
**Post date:** [June 17, 2020, 3:02pm UTC](https://discourse.julialang.org/t/development-process-for-working-with-genie-and-javascript-rest-api/41336/7 "2020-06-17T15:02:09Z")

</div>

The workflow that I would suggest in your case is to run both servers locally on different ports. Make sure that the Julia API server sets the header

```julia
Access-Control-Allow-Origin: *

```

and you can then access it from the browser using:

```julia
fetch("http://localhost:1234/...", {mode: "cors"}).then(...)

```

where 1234 is the port of the Julia API.

If your front-end needs to be compiled using Node, then install Node locally and use a dev server. Running locally makes your life a lot easier!

Lots of apps can be written without a compile step - have a look at Preact and HTM to replace React and JSX - they work in the browser right away.

---

<div class="post-metadata">

**Author:** ![whenning](https://avatars.discourse-cdn.com/v4/letter/w/9fc348/32.png) [@whenning](https://discourse.julialang.org/u/whenning)\
**Post date:** [June 17, 2020, 3:22pm UTC](https://discourse.julialang.org/t/development-process-for-working-with-genie-and-javascript-rest-api/41336/8 "2020-06-17T15:22:09Z")

</div>

Thanks @mthelm85 . This is similar to what I am currently doing, except that I have been thinking about trying heroku for basic computing and I appreciate your example.

---

<div class="post-metadata">

**Author:** ![whenning](https://avatars.discourse-cdn.com/v4/letter/w/9fc348/32.png) [@whenning](https://discourse.julialang.org/u/whenning)\
**Post date:** [June 17, 2020, 3:24pm UTC](https://discourse.julialang.org/t/development-process-for-working-with-genie-and-javascript-rest-api/41336/9 "2020-06-17T15:24:00Z")

</div>

Thanks @fonsp. This is what I have been trying to achieve without success, but also with not enough understanding. I will retry with your advice and report back.

---

<div class="post-metadata">

**Author:** ![whenning](https://avatars.discourse-cdn.com/v4/letter/w/9fc348/32.png) [@whenning](https://discourse.julialang.org/u/whenning)\
**Post date:** [June 29, 2020, 3:42pm UTC](https://discourse.julialang.org/t/development-process-for-working-with-genie-and-javascript-rest-api/41336/10 "2020-06-29T15:42:03Z")

</div>

@fonsp I am able to successfully communicate between my development front-end and development Julia servers (which is great), but I am getting a CORS error when I try and fetch:

```julia
Access to fetch at 'http://127.0.0.1:8000/random' from origin 
'http://localhost:3000' has been blocked by CORS policy: 
The 'Access-Control-Allow-Origin' header contains the invalid value ''. 
Have the server send the header with a valid value, or, if an opaque 
response serves your needs, set the request's mode to 'no-cors' 
to fetch the resource with CORS disabled.

```

**routes.jl**

```julia
using Genie, Genie.Router, Genie.Renderer.Json, Genie.Requests
using HTTP

Genie.config.run_as_server = true
Genie.config.cors_allowed_origins = ["*"]

route("/random", method="POST") do
  dim = parse(Int, get(@params, :dim, "2"))
  num = parse(Int, get(@params, :num, "3"))
  (:random => rand(dim,num)) |> json
end

Genie.startup()

```

**relevant App.js**

```julia
let params = {
  dim: '1',
  num: '3'
}

const url = 'http://127.0.0.1:8000/random'
fetch(url, {
            method: 'POST',
            mode: "cors", 
            body: params               
          })
.then(response => response.json())
.then(data => console.log(data))
.catch(()=>console.log('Wade- you cant access the url response'));

```

---

<div class="post-metadata">

**Author:** ![whenning](https://avatars.discourse-cdn.com/v4/letter/w/9fc348/32.png) [@whenning](https://discourse.julialang.org/u/whenning)\
**Post date:** [June 30, 2020, 8:16pm UTC](https://discourse.julialang.org/t/development-process-for-working-with-genie-and-javascript-rest-api/41336/11 "2020-06-30T20:16:33Z")

</div>

@mthelm85 Do you have a good source for the Heroku process of pushing the Julia server to Heroku?

---

<div class="post-metadata">

**Author:** ![whenning](https://avatars.discourse-cdn.com/v4/letter/w/9fc348/32.png) [@whenning](https://discourse.julialang.org/u/whenning)\
**Post date:** [June 30, 2020, 8:20pm UTC](https://discourse.julialang.org/t/development-process-for-working-with-genie-and-javascript-rest-api/41336/12 "2020-06-30T20:20:08Z")

</div>

@mthelm85 @fonsp UPDATE: I posted the CORS problem to the Genie.jl issues on Github and they found an error on their side. Thanks for all your help. I just assumed that I was doing something wrong, and I appreciate your help in guiding me.

---

<div class="post-metadata">

**Author:** ![mthelm85](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/mthelm85/32/224164_2.png) [@mthelm85](https://discourse.julialang.org/u/mthelm85)\
**Post date:** [July 1, 2020, 1:40am UTC](https://discourse.julialang.org/t/development-process-for-working-with-genie-and-javascript-rest-api/41336/13 "2020-07-01T01:40:35Z")

</div>

> Do you have a good source for the Heroku process of pushing the Julia server to Heroku?

I’m drawing a blank on this, unfortunately. I found this and it seems vaguely familiar but I really can’t remember if I used it or not:

[https://elements.heroku.com/buildpacks/optomatica/heroku-buildpack-julia](https://elements.heroku.com/buildpacks/optomatica/heroku-buildpack-julia)

I think I may have followed the instructions here:

[https://genieframework.github.io/Genie.jl/documentation/90--Deploying\_With\_Heroku\_Buildpacks.html](https://genieframework.github.io/Genie.jl/documentation/90--Deploying_With_Heroku_Buildpacks.html)

…but the site seems to be down at the moment I’m writing this.

---

<div class="post-metadata">

**Author:** ![fonsp](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/fonsp/32/222349_2.png) [@fonsp](https://discourse.julialang.org/u/fonsp)\
**Post date:** [July 26, 2020, 12:02pm UTC](https://discourse.julialang.org/t/development-process-for-working-with-genie-and-javascript-rest-api/41336/14 "2020-07-26T12:02:03Z")

</div>

Here is the updated link:

[https://geniejl.readthedocs.io/en/latest/documentation/90–Deploying\_With\_Heroku\_Buildpacks/](https://geniejl.readthedocs.io/en/latest/documentation/90--Deploying_With_Heroku_Buildpacks/)

---

<div class="post-metadata">

**Author:** ![fonsp](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/fonsp/32/222349_2.png) [@fonsp](https://discourse.julialang.org/u/fonsp)\
**Post date:** [July 26, 2020, 12:02pm UTC](https://discourse.julialang.org/t/development-process-for-working-with-genie-and-javascript-rest-api/41336/15 "2020-07-26T12:02:34Z")

</div>

I wrote a guide on how to set up a simple Julia project with heroku, hope it helps!

[https://gist.github.com/fonsp/38965d7595a5d1060e27d6ca2084778d](https://gist.github.com/fonsp/38965d7595a5d1060e27d6ca2084778d)

---

<div class="post-metadata">

**Author:** ![whenning](https://avatars.discourse-cdn.com/v4/letter/w/9fc348/32.png) [@whenning](https://discourse.julialang.org/u/whenning)\
**Post date:** [July 26, 2020, 7:07pm UTC](https://discourse.julialang.org/t/development-process-for-working-with-genie-and-javascript-rest-api/41336/16 "2020-07-26T19:07:48Z")

</div>

That is so beautiful and clear. Thank you.