Is there a frontend repo / framework / way that’s particularly well suited for the IC? It’s an existing Motoko backend project (with pure HTML + Javascript frontend) that I need to move to a more capable frontend, so steps for how to go from A to B, deal with config files and so on are particularly appreciated.
The best strategy for SEO on the IC is probably the static site generation, or “Jamstack” model popularized by Netlify. You can pre-render your entire website into HTML, JS, and CSS for every dynamic route during the build process, and upload it to the canister as a static site. The pre-rendered html will be the initial state of the app, and then it can continue from there.
The best frameworks I’m aware of for this are
and
3 Likes
Great, I’ll look into them. But how do I go from these to integrating them to an existing Motoko backend with HTML + pure Javascript project?
1 Like
There’s not going to be a definite answer to that. You can try to separate the canister logic from your first application into its own files and re-use them in the new project, but it’s going to be a significant rewrite for any moderately complex application
2 Likes
Yes, I probably took pure JS too far, but rewrite aside, to put it simply, how do I go from my current JS + HTML + CSS frontend directory and config files to an empty boilerplate of one of the above but connected to the backend and dfx / the existing repo? In other words, how do I go from the current state to a state such that I can begin rewriting the frontend code?
1 Like
The literal steps I would follow are:
- Move all non-ui logic into pure functions
- Move pure functions into their own files
- Copy dfx.json and backend into new project
- Copy function files into new project
- Build a new app with the state and UI management conventions that are native to it
- Re-use your pure functions as you go
2 Likes
Great. I’ll try and follow this path.