Made withOctober CMSTutorial

Creating Vue, Vuex and October CMS App - 01 - Setup October CMS Setup

W

Watch and Learn

Creator on the October CMS channel

Watch on YouTube ↗

25K viewsOct 9, 201815:45 runtime

Learn to build a full-stack rent-a-car application by setting up October CMS as a RESTful API backend for a Vue.js frontend. This tutorial walks through the initial project setup, including installing October CMS with Composer and configuring a local development environment with…

Chapters

#octobercms#tutorial#cmscrm

Project Goal

The objective is to build a full-stack rent-a-car application using October CMS as a headless backend and Vue.js for the frontend. This initial video focuses on setting up the entire backend and creating an API endpoint.

Backend Setup with October CMS

This section details the local environment configuration and installation of October CMS.

Local Environment

Tool: Laravel Valet is used for local development, serving project directories automatically.
Project Structure: A main project folder (vue-rent-a-car) is created, with October CMS installed into a subdirectory named api.
Domain Setup: A local subdomain (api.vue-rent-a-car.test) is linked to the api directory using the command valet link api.vue-rent-a-car.

Note
While Laravel Valet is used here, you can use other local server environments like MAMP or XAMPP. The key is to point your web server to the correct project directory.

Installation Steps

Install October CMS: Use Composer to create the project in the api folder.
```
composer create-project october/october api
```
Create Database: A MySQL database named vue_rent_a_car is created.
Run Installer: Navigate into the api directory and run the interactive installer.
```
php artisan october:install
```
Configure: Provide the database credentials, create an admin user, and set the application URL during the installation prompts.
Update: After installation, update October CMS to the latest version via the backend settings (Settings > Updates & Plugins).

Building the API with the Builder Plugin

The Builder plugin is a powerful tool used to quickly scaffold the necessary components for the API.

Install Builder: Install the RainLab.Builder plugin from the October CMS marketplace.
Create Custom Plugin: Use Builder to create a new plugin named Vue Rent a Car.
Define Database Schema: Create a vehicles table with the following fields:
- id (Primary Key, Auto-incrementing)
- title (String)
- slug (String)
- description (Text)
- created_at, updated_at (Timestamps)
Scaffold MVC Components:
- Model: Create a Vehicle model linked to the vehicles table.
- Form: Design a backend form with fields for title, slug, and description. The slug field is configured with a preset to automatically generate from the title.
- List: Configure a list view to display existing vehicles in the backend.
- Controller: Create a Vehicles controller with list and form behaviors.
- Menu Item: Add a Vehicles item to the main backend navigation, linking to the new controller.

Creating the API Endpoint

With the backend structure in place, the final step is to create a public API endpoint to expose the vehicle data.

Create routes.php: Inside your custom plugin's directory (plugins/author/plugin/), create a file named routes.php.
Define the Route: Add code to define a route and fetch data using the Eloquent model.

Tip
The following code in routes.php creates an endpoint at /api/vehicles that returns all vehicle records as JSON.
<?php

use Vichlearn\Vuerentacar\Models\Vehicle;

Route::get('api/vehicles', function () {
    return Vehicle::all();
});

Test the Endpoint: Verify the setup by navigating to the endpoint URL (e.g., http://api.vue-rent-a-car.test/api/vehicles) in your browser to see the JSON output.

Introduction to the Project

Okay, so it's time for a new series. So you know I like to make my tutorials in a way so that we can actually build something that is close to a real-world scenario. So in this series, we are going to create a rent-a-car app using October CMS as a back-end and Vue as a front-end to our application. Now I know what you're saying, hey, we already did that, and you would be kind of right. We did something similar when we created the October Vue to-do app, but this is going to be something different, guys.

In this series, we are going to tackle a bit more complex subjects. So we are going to remind ourselves of what we learned in the past series, but we are also going to tackle some new concepts like Vuex and Vue Router. And before we do any real work, we need to set up our project. So that is what we are going to be doing in this and the next episode. And before we begin, remember everything that we do here will be available for you on GitHub. The link will be in the description below. Okay, so let's do this.

Setting Up the Local Environment

Okay so I'm using Laravel Valet for my localhost. So my local host server, but you can use anything you want, MAMP, XAMPP, and so on. So this is going to be used for October so that we can access our API. You can also check out the video I will put it in the cards up in the right corner. I already have a video about setting up October with Laravel Valet, but as you will see, it's very easy because Laravel Valet allows us to just create a directory. We are going to call it vue-rent-a-car. CD into it, vue-rent-a-car. We can maybe create an index.html file right here. And now if I go right here to vue-rent-a-car.localhost, as we'll see we just get an empty page. So this is the easy way we can access our October application. So we are going to install our October application right here and we want to call it api.

Installing October CMS and Creating a Database

Composer create-project october/october because this October application is going to be our API. Okay so while this is running, I'm just going to open up Sequel Pro and create the database for myself. We are going to be using MySQL database for this but you can even use SQLite if you like when setting up October. So I'm just going to connect to my Valet and create a new database. And I'm just going to call it vue-rent-a-car and that's it. So we created our database and we are just going to wait for Composer to finish installing October. So it throws this fatal error right here, but that's nothing to worry about. If you just do php artisan october:install, it should work okay. Okay, so not right here, we need to go to api and now we run php artisan october:install because our October is in the api directory.

Configuring October CMS Installation

Okay, so we first need to choose the database. In our case, it's going to be 0, but as I said you can use SQLite. There are tutorials on my channel which deal with installing October, so you can check that out. Okay, MySQL host is going to be localhost, port is 3306, database name is vue-rent-a-car. Login is root and password is nothing. First name is, email address is admin.com and login is going to be admin and password is also going to be admin. Is this information correct? Yes. Application URL is actually going to be api.vue-rent-a-car. So as you can see I set a subdomain up for this. Okay.

Linking a Subdomain and Accessing the Backend

So the view is installed and now if we try to access vue-rent-a-car.localhost, refresh this page, as you can see nothing is happening. If we go to api, as you can see this doesn't look good, and we can't get to the backend of our view instance, actually our October installation. So what we want to do right here is create a subdomain for it. Using Valet it's pretty simple but if you're using something like MAMP, XAMPP, you just point it to the API directory, so you don't have to do this. But if you're using Valet you can do something like valet link api.vue-rent-a-car, right? And now we should have our subdomain set up. So we can access it like this api.vue-rent-a-car right? And now we get to the demo page. And if we go to the backend, we can log in.

Updating October CMS to the Latest Version

So we are just going to go to the settings and now we are going to update October to the latest version and install some plugins. okay so I'm just going to click update some plugins, check for updates. As you can see we need to select an action for this. So we are using PHP 7 so we don't need to worry about this, at least with Laravel Valet. If you are using something else, please make sure that you're using PHP 7. If you don't use PHP 7 then you don't need to update this. So don't update October if you're using something like PHP 5.6. Everything we do here will most likely work with the old version of October. So select action, confirm update, and update software.

Installing and Using the Builder Plugin

Okay, so the update is completed. We are on the build 443. Now we just want to install one plugin which is called Builder so that we can set up our API or create our API plugin. Okay so now that we have Builder installed, we can use it to create our API plugin which is going to send the data to our API. Now we did something similar to this in a few videos on this site, especially in the October series, but we are just going to quickly go through it. So it's nothing hard. It's Builder plugin, we want to create a new plugin, we want to give it the name of Vue Rent-a-Car and the author is going to be vichlearn, vichlearn and this is going to be our icon. So okay.

Creating the Database Schema with Builder

Now that we have our plugin set up, let's add a new table to actually new database. So it's going to be called vichlearn_vuerentacar_vehicles. So the first column is going to be ID. It's going to be type of integer, where is it? okay so integer. It's going to be auto-incrementing and it's going to be primary key field, so we need that. Next thing we're going to be needing, name. So add column name or title. So it's going to be a string and it's going to be nullable. Let's create another one called slug. So this is going to be a slug for our vehicle. So this is also going to be a string, nullable. And let's just create one more field and we're going to call it description. So it's going to be a description of our vehicle. It's going to be text and it's also going to be nullable. And we are going to add timestamps, so created_at, updated_at, so that we have that. And save this. Okay, save and apply.

Defining the Model, Form, and List

Now we need to create our models. So we are going to create a new model called Vehicle. So this is the name convention of Laravel, so your controllers should be vehicles and your model should be Vehicle with the first letter in capital case. Add timestamps, okay. Now we want to create a form and that form is going to contain text for our name or title. So title, title. Okay. Let's create another control. This is also going to be text but this is going to be slug and we're going to name it that. And here under the Advanced, we are going to choose a preset and choose a field called title and the type is going to be slug. So what this is going to do when we start typing something in the title field, the slug is automatically going to be created in the slug field. Now we are going to add, let me just see, a rich text editor. We are going to make it span full length and we are going to make the size of it to be large and it's going to be called, be calling the field description. Okay, and that's about it so save this. We are also going to create a list and the list is going to be field title, just title for now. So the label is going to be title. So this is going to be the list when we go to our vehicles and we are going to see the list of vehicles and then we can click on it and update it or delete it or whatever. So the type is going to be, not string, text. it's going to be searchable and it's going to be sortable for now. Save this.

Okay, let's go to the backend menu and actually we are not... we are just going to create the main menu item and we are going to call it Vehicles. So this is going to be the menu item that is going to appear right here when we create this plugin. So Vehicles. URL, we don't have the URL yet and we are just going to choose an icon of okay, right. Save this. We are going to get back to this because we still haven't got the link set up, but once we get the controller set up, then we are going to have a link or autocomplete right here. So we go to controllers, we add a new controller and it's going to be called Vehicles. And the model for the vehicles is going to be Vehicle and the menu item is going to be Vehicles. And we are going to set up a list controller behavior and form controller behavior. Okay, save this. Now we go back to backend menu, click on vehicles, and in the URL, we start writing vehicles, right? So we get vichlearn will rent a car vehicles, okay. Save this, and we just need to refresh the page. Right, so we have vehicles right here.

Adding Sample Data

So let's just create two entries in it. So Vehicles. we go to Create and we add vehicle one, add some description right here, and click Create. And we add, so this is our list, right? So we create another vehicle. Check out how this is actually auto-filling. So vehicle-02, so this is our slug, and we just add some description, create and close. And now we have two vehicles right here. Okay so we got this set up.

Creating and Testing the API Endpoint

Now we just need to go into October and open it up in our text editor and set up our actual API. So we need to set up our API routes or endpoints. So now we're in our api folder where October lives. We go to plugins/vichlearn/vuerentacar and create a new file right here called routes.php. Okay, save this. Now, let me just make this bigger. We open up PHP tags and then we use Vichlearn\Vuerentacar\Models and the model we created was called Vehicle. Okay and now we create our route. So this is just simple Laravel code to get our route. So our route is going to be called vehicles and in that route we are going to use Eloquent code to get all the vehicles and it's pretty simple. So Vehicle::all(). and that's it. So we are getting all of the vehicles and now we just need to return them. Now if we go to our endpoint in the browser, so api.vue.localhost/api/vehicles we get this. So this is our API and it works. So this is it for this episode guys. Don't forget everything we did here will be available for you on GitHub. And in the next episode, we are going to connect to this API and just console.log all of that data and then we can get to real work. Thank you guys for watching and I will see you in the next one.