# Elm SPA react to browser url changes

**URL:** <https://discourse.elm-lang.org/t/elm-spa-react-to-browser-url-changes/2768>\
**Category:** Learn\
**Created:** [December 14, 2018, 12:22pm UTC](https://discourse.elm-lang.org/t/elm-spa-react-to-browser-url-changes/2768 "2018-12-14T12:22:17Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![davidnel34](https://avatars.discourse-cdn.com/v4/letter/d/73ab20/32.png) [@davidnel34](https://discourse.elm-lang.org/u/davidnel34)\
**Post date:** [December 14, 2018, 12:22pm UTC](https://discourse.elm-lang.org/t/elm-spa-react-to-browser-url-changes/2768/1 "2018-12-14T12:22:17Z")

</div>

I am busy creating an elm SPA. When a link is clicked, the app parses it as expected, however when someone types “[http://localhost:8000/blog](http://localhost:8000/blog)” it will reload the page looking to serve a blog page, but there is no such page because the whole SPA is on the single index.html page. How can I intercept that browser url change and tell my SPA to parse it as a normal blog route and act accordingly, as it does with url clicks?

---

<div class="post-metadata">

**Author:** ![littleStudent](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/littlestudent/32/314_2.png) [@littleStudent](https://discourse.elm-lang.org/u/littleStudent)\
**Post date:** [December 14, 2018, 12:29pm UTC](https://discourse.elm-lang.org/t/elm-spa-react-to-browser-url-changes/2768/2 "2018-12-14T12:29:27Z")

</div>

Hi David,  
this only depends on the way you serve your index.html file. It has nothing to do with our elm application.  
You need to make sure that however you are hosting / starting the application, all the traffic is serving your index.html

[http://localhost:8000/](http://localhost:8000/) -\> index.html  
[http://localhost:8000/blog](http://localhost:8000/blog) -\> index.html

The elm app handles the routing internally after the runtime takes over.

---

<div class="post-metadata">

**Author:** ![davidnel34](https://avatars.discourse-cdn.com/v4/letter/d/73ab20/32.png) [@davidnel34](https://discourse.elm-lang.org/u/davidnel34)\
**Post date:** [December 14, 2018, 12:30pm UTC](https://discourse.elm-lang.org/t/elm-spa-react-to-browser-url-changes/2768/3 "2018-12-14T12:30:58Z")

</div>

Thanks for the quick response. I understand now. Could you please elaborate on how to do that?

---

<div class="post-metadata">

**Author:** ![littleStudent](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/littlestudent/32/314_2.png) [@littleStudent](https://discourse.elm-lang.org/u/littleStudent)\
**Post date:** [December 14, 2018, 12:35pm UTC](https://discourse.elm-lang.org/t/elm-spa-react-to-browser-url-changes/2768/4 "2018-12-14T12:35:48Z")

</div>

What are you using to start your elm app at the moment? You could use something like create-elm-app which has the setup you want built in [https://github.com/halfzebra/create-elm-app](https://github.com/halfzebra/create-elm-app).

There are many different options out there to do that.

---

<div class="post-metadata">

**Author:** ![davidnel34](https://avatars.discourse-cdn.com/v4/letter/d/73ab20/32.png) [@davidnel34](https://discourse.elm-lang.org/u/davidnel34)\
**Post date:** [December 14, 2018, 12:49pm UTC](https://discourse.elm-lang.org/t/elm-spa-react-to-browser-url-changes/2768/5 "2018-12-14T12:49:03Z")

</div>

I’m using http-server from npm.

---

<div class="post-metadata">

**Author:** ![dmy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/dmy/32/702_2.png) [@dmy](https://discourse.elm-lang.org/u/dmy)\
**Post date:** [December 14, 2018, 1:06pm UTC](https://discourse.elm-lang.org/t/elm-spa-react-to-browser-url-changes/2768/6 "2018-12-14T13:06:49Z")

</div>

Another way is to use [`elm-live`](https://github.com/wking-io/elm-live) with the `-u | --pushstate` option instead of your `http-server`. It will serve `index.html` instead of 404. As a bonus, you will get live reloading.

For example:

```auto
$ elm-live src/Main.elm -u

```

or if you prefer to build a javascript file:

```nohighlight
$ elm-live src/Main.elm -u -- --output=elm.js

```

---

<div class="post-metadata">

**Author:** ![davidnel34](https://avatars.discourse-cdn.com/v4/letter/d/73ab20/32.png) [@davidnel34](https://discourse.elm-lang.org/u/davidnel34)\
**Post date:** [December 14, 2018, 2:02pm UTC](https://discourse.elm-lang.org/t/elm-spa-react-to-browser-url-changes/2768/7 "2018-12-14T14:02:15Z")

</div>

Thank you very much!

---

<div class="post-metadata">

**Author:** ![littleStudent](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/littlestudent/32/314_2.png) [@littleStudent](https://discourse.elm-lang.org/u/littleStudent)\
**Post date:** [December 15, 2018, 1:58pm UTC](https://discourse.elm-lang.org/t/elm-spa-react-to-browser-url-changes/2768/8 "2018-12-15T13:58:24Z")

</div>

seems like http-server does not have an option for SPA.  
you could also use [https://github.com/zeit/serve](https://github.com/zeit/serve).  
`serve -s`

---

<div class="post-metadata">

**Author:** ![choonkeat](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/choonkeat/32/1555_2.png) [@choonkeat](https://discourse.elm-lang.org/u/choonkeat)\
**Post date:** [December 19, 2018, 1:22pm UTC](https://discourse.elm-lang.org/t/elm-spa-react-to-browser-url-changes/2768/9 "2018-12-19T13:22:14Z")

</div>

> [@davidnel34](#):
>
> when someone types “[http://localhost:8000/blog”](http://localhost:8000/blog%E2%80%9D) … but there is no such page because the whole SPA is on the single index.html page.

you’ve correctly identified that the problem is “there is no such page”. so, you just need to configure your web server to serve your spa index.html as the `404 Not Found` page

> [@davidnel34](#):
>
> the whole SPA is on the single index.html page  
> …  
> I’m using http-server from npm.

The http-server’s github page does mention [GitHub - http-party/http-server: a simple zero-configuration command-line http server](https://github.com/indexzero/http-server#magic-files)

> - `404.html` will be served if a file is not found. This can be used for Single-Page App (SPA) hosting to serve the entry page.

So, the trick is: instead of serving your SPA with `index.html`, just serve it with `404.html`

If you ever need to use a different web server (e.g. nginx), the same strategy will work too: configure your SPA as the `404 Not Found` page

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [December 29, 2018, 1:22pm UTC](https://discourse.elm-lang.org/t/elm-spa-react-to-browser-url-changes/2768/10 "2018-12-29T13:22:18Z")

</div>

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.