Hi i am making the frontend on IC.
I have <a href="/next.html?param=value"></a>, in my index.html page.
My frontend’s src folder is as follows:
./index.html
./index.js
./next.html
./next.js
But i cant go to to next because the current url is “http://127.0.0.1:8000/?canisterId=canisterId” and if i go to “http://127.0.0.1:8000/next.html?param=value”, it will just throw me 400 (Bad request).
How should I change between pages on IC? Or can it only handle one-page frontend?
This is a problem only for local development. On mainnet you will be fine.
Most browsers support the ability to write <canister id>.localhost:<port>. Does that work for you?
hi Severin
Yea i can but i have to put my next.html and next.js under assets folder, and treat them like static files. Is this the right way? Because if this is right, does this mean that the user can see my “.js” files?
Also I know this is small problem but how do I route without having to define “.html” file extension?
AFAIK most projects generate the files that will end up in the assets folder, maybe after they have been minimised. But @kpeacock can help more with that.
Yes, that’s right. But if the files are not visible nobody would be able to use them either.
Starting with dfx 0.12.0, any /route is aliased to /route.html by default. Is that what you’re looking for?
alright got it so the arrangement will be like so:
src/index.html
src/index.js
these files above get webpacked to dist folder.
and
asset/logo.svg
asset/next.html
asset/next.js
i guess i will stick with this since it’s working.
yea i’m looking to do this. Even with the current arrangement like above, i still cant achieve it. I’ve tried /next but it wont get routed to /next.html so i have to type in the full file name. My dfx is 0.12.1. Or do I need to modify some stuffs on the default webpack.config.js to get the routing works?
I will post the screenshots later.
url: /
url: /next
i’ve pressed enter, it still wont get reach /next.html
url: /next.html
now it got reached
frontend folder
the webpack.config.js is the default, generated when one dfx new hello
Nevermind, I just looked at the commits a bit more close. The aliasing was only added in 0.12.2-beta.0, it landed in the changelog of 0.12.0 through a merge fail.
I would actually recommend you try the latest beta which you can install with
DFX_VERSION="0.13.0-beta.2" sh -ci "$(curl -fsSL https://internetcomputer.org/install.sh)"
Then things should work.
If there’s too many breaking changes (there shouldn’t be much if anything at all) then using 0.12.2-beta.0 would already include the aliasing as well
Alright is it stable enough for development tho? If not, it’s okay, maybe I can do the routing in the future. I will just focus on other things while waiting for 0.12.2
Anyway, have you looked at my file tree? Are the files supposed to be arranged like the screenshot above I posted? (pages that are not homepage, will be placed under assets folder)
IMO yes, 0.13.0-beta.2 is stable enough, I haven’t heard of any bugs since beta.0. The other beta versions were all added because a feature we want in the next release was not yet included.
I would listen to what @kpeacock says or ask on the discord, but I think this is fine.
Yeah, definitely try out the beta build - route remapping is worth it for your purposes!
I’d also note that you can have the option to nest your content in folders, where
/nest
| index.html
| index.js
will route as "foo.app/nest" and "foo.app/nest/index.js", depending on your preferences for how you want the files to appear