David.dev

Sapper Svelte New Review

• ##sapper #svelte #html
• 18 Apr 2021

After a few months I am not revisiting the previous review of sapper-svelte. Recently, I decided to try to migrate a project from a dynamic to a static website to be hosted on google cloud. Looking back, I made a number of mistakes one of which was using carbon-svelte that added 430K of CSS components that I did not really need.

So I started fresh from the sapper blog template that uses markdown to store the articles (by default sapper would expect some API to fetch the blog articles).

I started from the default template and made a number of changes, especially to the layout. The final result is simple yet pleasing. Feel free to see it here at the new HTML.dev .

The standard sapper blog template included a index.svelte, layout.svelte and as components we have Nav.svelte, PostList.svelte.

I made these changes:

<script>
import cactus from 'images/cactus.jpg';
  import PostList from '@/components/PostList.svelte'
  import {posts} from '@/posts'
</script>


<style>


  figure{
    text-align: center;
    margin: 0 auto;
  }

  figure {
    margin: 0 0 1em 0;
  }

  img {

    max-width:100%;
    margin: 0 0 1em 0;
  }



  h2 {
  text-align: center;
  color: #5B6F55;
  }


</style>

<svelte:head>
<title>HTML.Dev</title>
</svelte:head>

<h2> <b> Welcome to HTML.DEV🌵</b>  </h2>
<figure>
<img alt="cactus" src="{cactus}">
</figure>

<PostList {posts}/>

The first thing to take care of was how to include an image. Apparently it is not from the static folder but I could only include it by adding it inside src/node_modules/images. Not sure if this is because of the template I am using as logically you should be able to import the images from other locations, but not a big issue once I figured it out.

in the "<style" tag we have standard CSS and, in this case, the posts are imported from the PostList.svelte file.

In _ layout.svelte we have

<script>
import Nav from '../components/Nav.svelte';
export let segment
</script>

<style>

main {

font-family: monotype-grotesque, sans-serif;
  position: relative;
  max-width: 56em;
  background-color: white;
  padding: 1em;
  margin: 0 auto;
  box-sizing: border-box;[
}
footer {

font-family: monotype-grotesque, sans-serif;
background-color: white;
position:fixed;](https://)
bottom:0;
width:100%;
height:30px;   /* Height of the footer */
opacity: 0.7;
text-align: center;


}

</style>

<Nav {segment}/>

<main>
<slot></slot>
</main>

<footer>
html.dev © 2021
</footer>

first we import our navigation, then we define a custom font on the style and even a sticky footer for the copyright notice.

PostList is pretty much standard but in the loop we display also the humandate in the format dd-month-year:

 <script>
  export let posts


</script>


<style>


h2{
font-weight: 700;
font-style: normal;
}



  a {
     color: #5B6F55;
    text-decoration: none;

    display: block;
  }



</style>



{#each posts as post}
  <article>
    <a href={`${post.permalink}`}>
      <h2>{post.title}</h2>
  </a>
  <p>{post.summary}...</p>
      <p>{post.humandate}</p>
  </article>
{/each}

All is pretty straightforward, we have the style, the loop with the relevant variables.

Nav.svelte was also modified slightly, mostly the style.

Some further notes: a) don't forget to modify template.html to include custom fonts or custom javascript. b) the 404.html page that is much neeeded in google cloud and probably other static providers is not automatically generated with sapper. This a known issue but the work around is just too clumsy for me so for now I use index.html as an error page c) Once you play with sapper you can simply run npx sapper export to have your static site ready in the export folder. You can then upload it in any static hosting provider, e.g. google cloud. d) Note that on google cloud you will need a load balancer for the SSL certificate (see this howto )

Another possibly annoying bit is that sapper would generate some different files each time so when you upload on google cloud you might need to remove the old files.

Despite the limitations the site hosted on google cloud with CDN is now much faster. It is also more secure and probably cheaper (hosting just a few cents each month but there will probably be an extra cost for the load balancing SSL).

In conclusions, if you are willing to learn a new technology I think that Sepper looks very interesting and works as expected. It is just a bit of an higher learning curve than other static site generators.

11
👏