DEV Community

loading...
Cover image for Portfolio - Building the website

Portfolio - Building the website

chris_daniel profile image Christopher Daniel ・1 min read

Website

I started building the website from the template Yew webpack template. Using this template reduced my development effort thanks to hot reloading. To speed up I have used bulma css framework

Key takes

  • I need to ensure the app is responsive
  • It should have a good light house score
  • SPA should have multiple routes

Routing

Yew has a router library named yew-router which we are using to setup routing. When SPA is deployed as static site it, routers need extra configuration. We have to configure index.html as fallback url so any site would first reach index.html. Now the routes simply append the href in url bar because of relative url. To avoid this I have used added base tag in head.

 <base href="https://yew-portfolio-iwfte.ondigitalocean.app/">
Enter fullscreen mode Exit fullscreen mode

Layout

Even though I used bulma css to speed up, there are some complex layouts, where we need to use css grid.

Bundle size

Unlike mature frontend frameworks like Next js, Gatsby, Yew didn't have code splitting. This costs the website performance. The wasm file size is around 450kb. This is one of the main downsides of writing a whole website in yew.

Light house scores

More Info

Cover Image from Unsplash

Discussion (0)

pic
Editor guide