9.7.1 Understanding the structure - caligrafy/caligrafy-quill GitHub Wiki

The inclusion of a framework into another makes it necessary to clarify the code structure. If you want to use the Vue module that is included with Caligrafy, it is important to grasp what to code and where to place your code.

application folder

The application folder in Caligrafy is the primary folder for server-side logic. Any client-side logic or logic that is compiled and interpreted by the browser must live elsewhere (more on this later).

The core of MVC architecture is inside the application folder. It is in that folder that Models, Views, Controllers and Routes are created.

public folder

The public folder in Caligrafy is the primary folder for client-side logic. That is, any html, javascript, CSS for example and any resources (such as images, fonts or other resources) that can be rendered and compiled by the browser should be located in this folder. Since Vue uses Javascript and Markup (HTML) as the underlying languages then the Vue app that you create must always live in the public folder.

app folder

Caligrafer scaffolds an app for you automatically. It can create apps that use Vue as a library and more elaborate apps for larger scale application that uses a more integrated version of Vue. Type php caligrafer.php in the command line to see what options Caligrafer provides you with.

Any app that is created by Caligrafer provides the very basic required structure that a client-side application needs to integrate Vue seamlessly. You can also create your own folder in the public folder. You can create and structure your client-side app folder at will provided it always contains a scripts subfolder and the app index file.

.php convention

For all Vue apps the markup files that are usually created as .html files must be created as a .php file. The reasons behind this decision is 1) to give you more flexibility to access some of the powerful features that are built natively with Caligrafy if you are a PHP developer and 2) to make it easier for Vue developers who may not be familiar with PHP to continue coding with Vue the way they are used to.

Caligrafy does all the handshaking for you and in order for Caligrafy to be able to do this, the markup files created for Vue need to have a .php instead of a .html extension.

The Handshake

Caligrafy takes care of all the handshaking needed between server-side and client-side. In order for the handshake to take place there are 2 steps needed in every Vue app that you create:

Step 1: Initialize Vue in the .php markup

In the markup of your Vue app (traditionally .html), the following script needs to be included at the end of the <body> and before any additional script that you want to add to your markup.

        <!-- Initialization scripts -->
        <script src="https://unpkg.com/vue@3"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script src="<?php echo APP_SERVICE_ROOT.'app.js'; ?>"></script>
        <script src="<?php echo APP_SERVICE_ROOT.'face-api.min.js'; ?>"></script>
        <script src="<?php echo APP_SERVICE_ROOT.'detect.js'; ?>"></script>
        <script>loadEnvironment(`<?php echo $env; ?>`);</script>
        <script> 
            /* Loading the app client framework
             * Any environment variables to be passed on from the server can take place in this here
             */
            loadVue({
                scripts: ['main']
             });
        </script>

Step 2: Loading Variables in your 'Vue' app

In the .js file or in the script that you include to your markup to instantiate your Vue app, you need to add an env variable to the data object in the app instance:

const app = Vue.createApp({
    el: '#app',
    data () {
      return {
          env: env,
  
      }
    }
  // etc...

Caligrafy comes prepackaged with an example markup public/app/index.php and a Vue script public/app/scripts/main.js to illustrate how the handshake happens.


You are probably wondering at this stage how the routing happens and how the browser knows how to redirect the requests to the Vue apps that you create. The answer is in the next section.



Next Section: Learn more about Routes

⚠️ **GitHub.com Fallback** ⚠️