# Elm basic SPA - How to handle refresh and manual enter of url

**URL:** <https://discourse.elm-lang.org/t/elm-basic-spa-how-to-handle-refresh-and-manual-enter-of-url/4088>\
**Category:** Learn\
**Created:** [August 1, 2019, 9:59am UTC](https://discourse.elm-lang.org/t/elm-basic-spa-how-to-handle-refresh-and-manual-enter-of-url/4088 "2019-08-01T09:59:08Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![marvs](https://avatars.discourse-cdn.com/v4/letter/m/e68b1a/32.png) [@marvs](https://discourse.elm-lang.org/u/marvs)\
**Post date:** [August 1, 2019, 9:59am UTC](https://discourse.elm-lang.org/t/elm-basic-spa-how-to-handle-refresh-and-manual-enter-of-url/4088/1 "2019-08-01T09:59:08Z")

</div>

Hi everyone,  
I am very new to Elm so please bear with me if my question is very basic. I’m toying around creating a very basic Elm SPA and use NPM http-server to host it. It is running fine and I can click on my two pages “Home” and “About” page. However, if I refresh the page, for example on “/about” page, I got 404 error. Also the same thing if I manually enter the url. I’d like my SPA to handle these cases. I’ve put my project at [https://github.com/mvperez/elm-spa-basic](https://github.com/mvperez/elm-spa-basic) so you can review the code and suggest what I can or need to do.  
Thanks,  
Marvin

---

<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:** [August 1, 2019, 10:20am UTC](https://discourse.elm-lang.org/t/elm-basic-spa-how-to-handle-refresh-and-manual-enter-of-url/4088/2 "2019-08-01T10:20:39Z")

</div>

You need to always serve `index.html` from your `http-server`, whatever the route.

A hack with the particular node server you are using is the `--proxy` option:

```bash
--proxy http://localhost:8080?

```

or whatever port you use.

See [https://github.com/http-party/http-server/issues/519](https://github.com/http-party/http-server/issues/519).

If it’s just during development, I would rather use [elm-live](https://github.com/wking-io/elm-live) with the `--pushstate` option to get live reloading:

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

```

---

<div class="post-metadata">

**Author:** ![marvs](https://avatars.discourse-cdn.com/v4/letter/m/e68b1a/32.png) [@marvs](https://discourse.elm-lang.org/u/marvs)\
**Post date:** [August 2, 2019, 2:42am UTC](https://discourse.elm-lang.org/t/elm-basic-spa-how-to-handle-refresh-and-manual-enter-of-url/4088/3 "2019-08-02T02:42:57Z")

</div>

Hi @dmy

I have tried this `http-server -p 5000 --proxy http://localhost:5000?` but still didn’t work on refresh or manual enter.

I can use `elm-live` as you suggested but I’d like to simulate first serving my index.html with my compiled main.js.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/2X/7/7b603de78836ae85e473b48dca512bf649e878a6.png)

---

<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:** [August 2, 2019, 6:01am UTC](https://discourse.elm-lang.org/t/elm-basic-spa-how-to-handle-refresh-and-manual-enter-of-url/4088/4 "2019-08-02T06:01:28Z")

</div>

From your logs, it seems that you are not connecting locally, you run the SPA on a server and connect from another client, right?

If so, `localhost` in the proxy option cannot work, as it will redirect clients to [http://localhost:5000/index.html](http://localhost:5000/index.html) on 404s (so clients will try to connect to themselves).

You have to use the IP of the server (or its DNS name if any) instead, basically the same one as the one you use to connect to it from the client initially.

---

<div class="post-metadata">

**Author:** ![marvs](https://avatars.discourse-cdn.com/v4/letter/m/e68b1a/32.png) [@marvs](https://discourse.elm-lang.org/u/marvs)\
**Post date:** [August 2, 2019, 6:31am UTC](https://discourse.elm-lang.org/t/elm-basic-spa-how-to-handle-refresh-and-manual-enter-of-url/4088/5 "2019-08-02T06:31:00Z")

</div>

I run the server locally and I’m accessing locally. Here’s another screenshot.

Also, I think my routing is not perfect. I click the “home” but it didn’t match my route. My source code is updated.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/2X/d/d6c0ef8f1ceee79966d514afb590631daa380869.png)

---

<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:** [August 2, 2019, 6:41am UTC](https://discourse.elm-lang.org/t/elm-basic-spa-how-to-handle-refresh-and-manual-enter-of-url/4088/6 "2019-08-02T06:41:35Z")

</div>

Well, it works, you don’t have 404s anymore. This is a different issue.

Your `routeParser` expect the `/` URL for home, but your link points to `/home`. Maybe what you want is `a [href "/"] [text "home"] ]` for your home link.

---

<div class="post-metadata">

**Author:** ![marvs](https://avatars.discourse-cdn.com/v4/letter/m/e68b1a/32.png) [@marvs](https://discourse.elm-lang.org/u/marvs)\
**Post date:** [August 2, 2019, 7:01am UTC](https://discourse.elm-lang.org/t/elm-basic-spa-how-to-handle-refresh-and-manual-enter-of-url/4088/7 "2019-08-02T07:01:52Z")

</div>

I changed the href now to “/”

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/2X/1/10ce6160d8e985140d167b98d42bc7511f27910d.png)

Still, the problem of refresh (reload) and manual enter still there.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/2X/d/d436276d7f7847e2a1c1f331a208d2c83e6f458e.png)

---

<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:** [August 2, 2019, 7:15am UTC](https://discourse.elm-lang.org/t/elm-basic-spa-how-to-handle-refresh-and-manual-enter-of-url/4088/8 "2019-08-02T07:15:00Z")

</div>

This is a a Windows specific issue of http-server:

> <https://github.com/http-party/http-server/issues/525>

Downgrading to http-server 0.9.0 should fix it.

---

<div class="post-metadata">

**Author:** ![marvs](https://avatars.discourse-cdn.com/v4/letter/m/e68b1a/32.png) [@marvs](https://discourse.elm-lang.org/u/marvs)\
**Post date:** [August 2, 2019, 7:29am UTC](https://discourse.elm-lang.org/t/elm-basic-spa-how-to-handle-refresh-and-manual-enter-of-url/4088/9 "2019-08-02T07:29:53Z")

</div>

Alright! Gotcha… Thank you so much! Now I can move on from here 🙂

---

<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:** [August 12, 2019, 7:29am UTC](https://discourse.elm-lang.org/t/elm-basic-spa-how-to-handle-refresh-and-manual-enter-of-url/4088/10 "2019-08-12T07:29:54Z")

</div>

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