/homedid hit this route and rendered the correct page
/tutorial/somethingdid hit this other route and rendered a different but presumably correct page
/ root path, you’d need one of the Parser to map against
Parser.top, e.g. adding a third item:
parser = Parser.oneOf [ Parser.map (stepHome model (Home.init ())) (Parser.s "home") , Parser.map (\tutorialName -> stepTutorial model (Tutorial.init ()) ) (Parser.s "tutorial" </> tutorialName_) , Parser.map (stepHome model (Home.init ())) Parser.top ]
@choonkeat Thanks for your reply. How do you visit urls like “/home”? I’m running this in
elm reactor and the url “http://localhost:8000/src/Main.elm” yields the Not Found page while “http://localhost:8000/src/Main.elm/home” yeilds 404.
oh I don’t use
elm reactor; i feel that’s more for demonstration purpose to learn a language.
elm-live src/Main.elm --pushstate
I updated the code and tried to separate the tutorial page out into separate HTML and JS files in the
dist folder. However, It’s not working and I’m stuck.
This use case is a little bit less common.
Usually, at this stage, you have a backend (express, django, phoenix, etc.) that serves elm on every page request and some kind of build manager that watches and builds Elm (e.g. parcel or webpack).
If you want to keep using
elm-live you can. You need a custom
index.html and some more
Here is the
index.html (located inside the
Here is the
elm-live src/Main.elm -u -s src/index.html -- --output=elm.js
-u tells the
elm-live to pushstate,
-s to use
src/index.html as the main html and
-- --output=elm.js instructs the compiler to output js. Anything after
-- is passed to the compiler. So, you can also pass
--debug and get the debugger.
I see. However, I have a tutorial page that requires HTML and JS while the home page is in Elm. How can I route to HTML in Elm? Here’s my website structure
In your website structure, you have pages. These pages are served by a server. If you want different html for different pages, you need to instruct the server to serve this different html. For this, you need a proper server like the ones I mentioned above.
Now, if you don’t want to go the server route, another way of solving it is to load everything everytime. In other worlds, have a single
index.html that has libraries in the header even if you don’t need them in all the pages.
@pdamoc Thank you for your advice! My page works like a charm using
elm-live. The only issue is when I deployed it to Netlify, the elm file is not loaded correctly. I’m currently doing
<script src="/dist/main.js"></script> but it seems that Netlify doesn’t recognize absolute path? Relative path in this case won’t work because
main.js is accessed under different urls - for home and tutorial pages. Do you know of a workaround to this? Link to website on Netlify: https://aiwaffle.netlify.com/
I’m not seeing any kind of loading of
main.js in the output. There is no
<script src="/dist/main.js"></script> .
I think it’s because Netlify cannot resolve the path. All other parts are up to date to my latest commit on github.
The tag is not present in the HTML. Resolving the path is another kind of error.
Thanks, I will ask Netlify about this.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.