In this probably final episode it would be good to put our Sapper, WordPress and Svelte app on line so that it would be accessible everywhere, and I know you guys are probably going to ask me about it ;). So we will deploy our app to Zeit Now and make it be SSR application. So Zeit Now is going to handle server side rendering for us, and our API can be on any old shared hosting you like, it is just a simple WordPress site after all.

In this episode we are going to deploy our WordPress, Svelte and Sapper app to Zeit Now and make it SSR ready.

Deploying On Zeit Now With SSR

So of course since we are using WordPress as our admin and REST API we don't want to hard code our navigation into Sapper and Svelte. We actually want to display that menu from WordPress in our app, and since we are displaying the menu, and menu links to pages, we of course also want to display WordPress pages in our Sapper and Svelte app. And I'm going to show you how to do that in this episode.

In this episode we are going to learn how to display navigation from our WordPress installation and display it in our Sapper and Svelte app

Navigation And Pages

In the [previous episode](https://watch-learn.com/creating-svelte-sapper-and-wordpress-website/handling-categories) I told you that our method for retrieving posts from our WordPress REST API was not exactly ideal, because it won't be server side rendered. And we actually want that, so that our site would be more performant and so that we can get all SEO benefits.

So in this episode we are going to refactor our Sapper and Svelte code to make it SSR ready, and that we can reap all of the benefits that we get from that once we put our site online.

In this episode we are going to refactor our Sapper and Svelte code to make it ready for Server Side Rendering or SSR

Refactoring - Making It SSR Ready

So first we are going to list our WordPress categories in our Sapper and Svelte app. An then of course we wanna display the posts from those categories once the user clicks on a certain category.

However, as you will learn in this video, this will not be the preferred of doing this, so I will [dedicate one episode](https://watch-learn.com/creating-svelte-sapper-and-wordpress-website/refactoring-making-it-ssr-ready) in the future to refactor this code and make it better and more performat. But that is not to say that this method will not be valuable on your Svelte and Sapper journey - because it definitely will be.

In this episode of we are going to learn how to handle categories from WordPress in our Sapper for Svelte app.

Handling Categories

We are currently getting ten posts on our Sapper homepage, however in the real world that number would most probably be much higher, our WordPress site might have even hundreds or thousands of posts, and of course, we don't want to show all of those posts on our homepage. So, best way to handle that would be pagination, and that is what we are going to be doing in this episode of creating Svelte, Sapper and WordPress site.

Also I'm going to show you how you can add Scss/Sass support to your Sapper project.

In this episode we are going to learn how to paginate our post list and how to add Sass support to our Svelte, Sapper and WordPress application.

Pagination And Sass Support

Now we are going to link the post list that we created in the previous episode to the detail page of every post using Sappers dynamic routing and slugs that we get from our WordPress API. We are also going to learn how to use environmental variables to define important data that we don't want to hard code in our Svelte app, or that may change between local and production environment.

In this episode of Creating Svelte, Sapper and WordPress sites we are going to link our post list to the details page of each post, and also learn how to setup environment variables.

Post Details And Environment Variables

In this series I'm going to shoow you how to create a headless website using Sapper framework that is based on Svelte. We have already [taken a brief look at the Sapper framework](https://watch-learn.com/dev-tools/sapper-svelte-3-first-look), but in this series we are gonna take a deep dive into the framework and try to create a fully functioning headless web site using WordPress as our backend and Svelte and Sapper as our frontend.

In this first episode we are going to connect to our WP REST API and fetch the posts from it. Then we are going to display them in our Svelte app.

In this first part of the "Creating Svelte, Sapper and WordPress Website" series we are going to connect to our WordPress API to fetch the posts and display them on our homepage

Fetching The Posts

Let's say that you want to add some interactive feature to the frontend of your site. You could of course use vanilla JS for that if it's something simple. But if you need to build something more complicated you would probably reach for some sort of frontend framework.

Now if you want to use Vue for that, that would be pretty simple, you could just call Vue with script tags to your page and immediatley start using it. Unfortunately that can't be said for Svelte. Because Svelte is a compiler, you would need to add a build step to your build pipeline. So in this episode I'm going to show you how to do that using Gulp and Webpack.

In this episode I'm going to show you how to add Svelte to your existing site using Gulp and Webpack.

How To Add Svelte To Your Site?

So we have already talked about Svelte 3 [in this video](https://watch-learn.com/dev-tools/svelte-3-kind-awsome). Now, Svelte 3 has a framework that is similar in concept and architecture to the frameworks from the big boys, like Next.js for React or Nuxt.js for Vue. This framework for Svelte 3 is called Sapper and we are going to take a first look at it in this episode.

In this video we are going to take a look at the Sapper framework for Svelte 3

Tutorials tagged with: svelte

Get in touch