If you have been following my channel or website lately you could see that there are a [lot](https://watch-learn.com/series/creating-svelte-sapper-and-wordpress-website) [of](https://watch-learn.com/series/creating-rent-car-app-vue-and-october) [series](https://watch-learn.com/series/static-sites-nuxt) where we use CMSs like WordPress or October CMS to create the data store and administration for our our frontend applications. This is an okay approach, but this means that we are not using most of the functionalities of those systems, like their frontend systems, because we create the frontend ourselves, using technologies like Vue or Svelte.

So wouldn't it be great if we used a CMS that is actually made for this type of usage. There are a few on the market, and they are usually sold as a service. However Strapi is fully open sourced, self hosted CMS for this exact purpose. And we are going to check it out in this episode.

In this episode we are going to take a look at a headless CMS called Strapi.

Let's Checkout... Strapi CMS

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

WordPress default API can sometimes be too much, it can give us more information then we actually need, also it can sometimes be hard to access WordPress media, because WordPress just gives you an ID of the media, and then you have to access another huge endpoint just to get the URL from the image, for example. 

Luckily, WordPress comes with built in methods for creating custom end points, so that way you can create your own API, that suits your needs exactly.

In this video we are going to learn how to quickly create custom endpoints for your WordPress REST API.

WP REST API - Custom Endpoints

In the [previous episode](https://watch-learn.com/creating-rent-car-app-vue-and-october/dates-backend) we created the backend to our Dates API using OctoberCMS and a pinch of PHP.

And now in this much longer episode we are going to bring it all together using Vue and Vuex, so that we can be sure that the reservations made in our app don't overlap with the reservation from somebody else. This is a crucial part of our app so that is why this episode is so long.

In this video we are continuing with our dates API, and now we are going to use Vue to create our frontend and functionality.

Dates Frontend

Now we are going to create dates API for our vehicles. So that we can see when the vehicles are reserved so that the users can't choose a vehicle that is already reserved by someone else. This is one of the crucial functionalities on in our app, so we are going to spend a little bit more time on it. 

In this episode we are going to focus on October CMS backend, and in the next episode we are going to make our Vue frontend and functionality.

In this episode we are going to start creating our dates functionality using October CMS.

Dates Backend

In [previous episode](http://watch-learn.com/video-tutorials/creating-rentacar-app-with-vue-and-october-connecting-filtering-by-location) we filtered our vehicles by location - on the frontend of our October and Vue.js app. And in this episode I'm just quickly going to show you how to do the same thing but using your backend.

Now, I'm doing this just so that I can show you that this kind of thing is possible and that there are cases where this method would actually be preferred. For example, if instead of getting just few records from your API, like we do, we would get thousands of records form the API. In that case it would be much better if our API would handle the filtering.

In this episode we are again going to filter our vehicles by location, but this time using October CMS and some Laravel methods.

Filtering On API

First we are going to go to Octobers Builder plugin to create our database, models, controllers etc. Then with a bit of PHP we are going to create our locations API endpoint. 

Then we are going to get that location data into our apps store, using Vuex of course. As you will see this is not going to go very well, so we are going to fix that situation using a bit of PHP on the API side of things.

In this episode we are going to use October CMS to create our locations API so that we can consume it with our Vue.js app.

Locations API

Authenticating you RESTful app can be pretty frustrating. But not with LoopBack framework, as you will see in this episode. We are going to make it so that everyone visiting our app can view all the posts. But only authenticated users can add posts.

Firstly I will show you how you can do that with built-in explorer for LoopBack, and after that I'm going to show you how we can do the same thing using Vue.

In this final episode of this mini series we are going to take a quick look at LoopBack authentication or ACL and how you can use it with Vue.js

Authentication With Vue

Now we are going to create another React.js which is going to become Gatsby.js page, and on that page we are going to list all of our posts. Also we are going to make our `node-config.js`a bit more readable with some tweaks.

In this episode we are going to list all the posts coming from our WordPress REST API using Gatsby.js

Tutorials tagged with: REST, rest

Get in touch