Old question: elm-spa: Cant Refresh the page or manually enter url

Learn
1

Hi,
I’m pretty new to elm and front-end. And I encountered the same problem which has been solved in this previous post 4088, but it didnt work for me.
edit: Neither worked on github.io, here is my github repository, in case you want to check it.
I’m using vscode’s live server extention to host in local. And I have tried to set the proxy of it based on that post:

# settings.json
{
    "liveServer.settings.proxy": {
        "enable": true,
        "baseUri": "/index.html",
        "proxyUri": "http://localhost:5500/index.html?"
    }
}

And also set it in varies way. It never work.
The elm code I wrote is the guide code:

-- Main.elm
module Main exposing (main)
import Html exposing (..)
import Html.Attributes exposing (class, src, alt, href)
import Browser
import Url
import Browser.Navigation as Nav


-- MAIN
main : Program () Model Msg
main = Browser.application 
    { init = init
    , update = update
    , view = view
    , subscriptions = subscriptions
    , onUrlChange = UrlChanged
    , onUrlRequest = LinkClicked
    }


-- MODEL
type alias Model =
  { key : Nav.Key
  , url : Url.Url
  }

init : () -> Url.Url -> Nav.Key -> ( Model, Cmd Msg )
init _ url key = ( Model key url, Cmd.none )


-- UPDATE
type Msg
  = LinkClicked Browser.UrlRequest
  | UrlChanged Url.Url

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
  case msg of
    LinkClicked urlRequest ->
      case urlRequest of
        Browser.Internal url ->
          ( model, Nav.pushUrl model.key (Url.toString url) )

        Browser.External href ->
          ( model, Nav.load href )

    UrlChanged url ->
      ( { model | url = url }
      , Cmd.none
      )


-- VIEW
view : Model -> Browser.Document Msg
view model =
  { title = "URL Interceptor"
  , body =
      [ text "The current URL is: "
      , b [] [ text (Url.toString model.url) ]
      , ul []
          [ viewLink "/home"
          , viewLink "/profile"
          , viewLink "/reviews/the-century-of-the-self"
          , viewLink "/reviews/public-opinion"
          , viewLink "/reviews/shah-of-shahs"
          ]
      ]
  }

viewLink : String -> Html msg
viewLink path =
  li [] [ a [ href path ] [ text path ] ]

-- SUBSCRIPTIONS
subscriptions : Model -> Sub Msg
subscriptions _ =
    Sub.none

Then compile it use elm make and uglifyjs to main.js, which linked in index.html:

<!-- index.html -->
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<script src="main.js"></script>
	<link rel="stylesheet" href="./assets/style.css">
	<link rel="icon" href="assets/logo.svg">
</head>

<body>
	<script>var app = Elm.Main.init();</script>
</body>

</html>

Is there any information I need to offer? Just mentioned below.
Please help me,
LTstrange.

2

Near the end of https://github.com/ritwickdey/vscode-live-server/blob/HEAD/docs/settings.md

liveServer.settings.file: : Path to the entry point file. Useful for SPA

Default: ""

I think this might be what you’re looking for rather than the proxy thing.

1 Like
3

And I also find that github pages didn’t support spa natively. So I might need to build my website in another way around.

4

There is another issue that many people have encountered. When a single slash is used in a URL (e.g. /view), everything works perfectly fine. However, when a double slash is used in a URL (e.g. /blog/1200), it results in a blank white page. This occurs because the HTML script link main.js is a relative path. As a result, the browser attempts to fetch /blog/main.js, which is assumed to be in the same path as /blog/index.html. This leads to the problem.

The solution is to use an absolute path in the HTML. By using /main.js, the problem can be effectively resolved.

5

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