Are you looking for a simple way to get started on making php phalcon and vue.js work in harmony? No theory just code examples? If you have worked on php phalcon and worked a bit on vue.js as individual projects and now feel the need to link these frameworks together, this article is for you.
You might have gone to the official vue-webpack git page
and followed the steps. After getting started with vue, you soon find your self asking, but how to link it with phalcon?
a. Structure your php phalcon project
b. How to structure your *.vue files
d. How to make a simple "hello world ecommerce" application using these frameworks
My job at the end of this article, is to help you, to be a better designer of your applications. This is not an article for "stackoverflow junkies" looking for magic bullets and quick solutions.You sure will get all your questions answered, but it is more important for me to help you to think right. Let us get started connecting the dots.
On the other hand, This article is not a how to guide on webpack or how node and package.json work. Neither are we going to touch on what is php-phalcon or how vue.js works. A basic understanding of php-phlacon and vue.js will help tremendously. Please read the official documentation. You do not need to know webpack or node.js to get the most out of this article either. Also, we will not be talking about css. The css design is beyond the scope of this article.
Few rules to keep in mind before we get started: For more on the theory check this article out
1. php is server code complied to HTML. (So fundamental, yet many ask questions related to this core concept.)
I emphasis the rules, because if the rules are very clear and understood deeply, this article really has no value. You can literally create what you want by reading the official documentation of the frameworks. Hence, it is my goal to help you to think right and be a better designer of your applications.
1. The application
What are we going to build?
The aim of this application is to make an eCommerce website where php Phalcon and vue.js users can buy stunning website templates. I like to have grand ideas. It makes the project more real.
In this tutorial, we will be focusing on a small part of this eCommerce application. We will try to populate a few website templates as image thumbnails using vue.js + phpphalcon. It is good to decide in the beginning what part of the html we want PHP Phalcon to control and which part of the HTML, vue should take control. A little planning can go a long way.
Let us divide the application into 3 section. Accordingly we can plan out the vue components.
1. The nav bar at the top
2. The center product display
3. The left side bar
For this article, let us focus on just the center product display section. Our goal is to make vue.js control this section and populate the details.
We will demonstrate:
1. How the website should be designed - the code structure the controller and actions in php-phalcon and how to design data objects.
2. How php phalcon will give vue.js control to manipulate dom objects
3. How vue.js will take control and populate the Center product display (Best selling website templates section)
4. How the data is passed from vue to phalcon using AJAX and JSON objects. (More on this in the next article)
2. The folder structure
Now that we have a high level overview of what we are going to build, let us go right into designing the folder structure.
The above picture shows the root level folder structure of the whole application. Let us describe each of these directories in detail.
1. The app folder is where all our code is going to be written in. This is the directory where all our modification and code changes is going to happen.
2. The node_modules is where all the node installs are going to be. When you do an npm install , this is where all those node modules will be installed. We never have to touch this directory.
4. The package.json and webpack.config.js files are placed in the root directory.
The next question you may have is, where should we place the *.vue files? Let us dive deep into the "app" folder.
Have a directory called vue inside the phalcon main (app) folder. Our goal is to keep all files in one location. You don't want to have vue files in some outside directory, and then try to merge them together. There is a reason behind the madness.
1. You will have a hard time maintaining your vue files. You wont know which vue file corresponds to which php view controller/action as your project expands.
2. You will have a messy and an unmaintainable folder structure.
As a rule of thumb. Structure your code, based on the application and NOT on the programming language and frameworks.
The languages and frameworks will keep changing, but the goal of your applications and sub-applications should always be the focus.
Most projects go wrong as they emphasis too much on the framework at hand. Look at your application holistically. What is the goal of your application and from there reverse engineer the structure of your server code and front end code.
Our goal at this stage is not to wonder how webpack or node will work. Our goal is to have a good code directory structure, so that we can work more effectively.
If you have multiple sub-features in your application, then in php-phalcon you would want to have Modules. In this case, your code structure would be something like this:
3. Configuring Vue
I bet you have come to read this article just for this section. How the heck do we configure vue to work? Here we go.
1. All configuration files will be in the root folder. Not public folder or any other folder. (webpack, package.json, gulp, etc)
2. All generated and public files will be in the public folder
3. All codes irrespective of the languages will be in the app folder
You may have a different code structure based on your application. But this is the structure we will be following in this article.
Step 1: Install the right dependencies
We need to have webpack, babel, vue-loader
This is my full package.json configuration file for this application.
After you have this file, you can do an npm install. npm will read this package.json file and automatically install all the dependencies in the node_modules folder.
This would install webpack, vue-resource, gulp or what ever dependencies you need for your application.
Step 2: Configure webpack: webpack.config.js
a. Tell webpack where to find the file
b. Tell webpack where to generate the vue files.
Step3: Configure Vue
Our goal in this step is to make sure that when we execute npm build, we are able to read our vue components and generate files in the right directory.
in the vue folder, create a file called main.js. The below picture should explain the details.
Let us test to see if webpack can read our vue file and generate it in the right directory.
After running npm run dev ( which is defined in our package.json file), webpack is able to read our file and generate our shop.bundle.js. We defined how to name our .js file in webpack.config.js under the output->filename tag. Also we named our entry "shop" that is where it gets the name shop.bundle.js.
We now got everything working.
Step 4: Working With Phalcon
3 things needs to be defined in your index.volt file
a. Define the class or id which vue can control. In our case we called our class ".wrap"
b. Define the element vue will take control and populate it
Vue.js now has full access to controlling your phpphalcon views.
Step5: Configuring vue and finisinhing up
We create a file in the vue directory called productdisplay.vue. This file will have the logic on how to populate the element.
in the main.js file, we need to import this *.vue file.
Step 6: Run our build and lets test it out.
a. Run our build using npm run dev.
b. Test the changes in the web-browser. And Voila, vue is now integrated with php phalcon!
IN the next article, we will go deep into how to populate this data from a database and using json objects and AJAX with vue and php phlacon. If you have any questions or better ways of working, please comment below. The best comment, I will send you my personal folder structure.