9.7.2 Routes - caligrafy/caligrafy-quill GitHub Wiki

Integrating frameworks requires a clear definition on the responsibilities of each. One of these responsibilities that could be of concern is Routing. Routing is about handling the request that comes from the browser and dispatching it to the intended modules or pages.

Learn more about Routing here

In Caligrafy, routes are interpreted and handled on the server-side - that is in the application folder. What this means is that with the integration with Vue, Caligrafy will need to determine when, what and how to hand-off the information to the app folder so that Vue renders it.

In order to do that, there needs to be a way to distinguish 2 types of routes:

Data Routes are api routes that are meant to establish HTTP requests to retrieve information from the server or to send commands to it and return a response to be rendered on the browser.

When Vue is being used, the Caligrafy data routes that are created on the server-side need to return a special type of view from either the route or the controller. That special type of view can be called in 2 different ways:

return view(null, array(<all the data you want to send in your response>));

// OR

return api(array(<all the data you want to send in your response>)); 

Notice: Data routes apply to any supported HTTP request (GET, POST, PUT, DELETE).

Page Routes are GET routes that are meant to render a user interface along with any data that need to be given to it. When using Vue, the Caligrafy page routes created need to return a specific view from either the route or the controller:

return view('Client/app', array('appName' => <name of the app folder>,'app' => '<name of the markup file of the vue app'>, <any other data to pass>));

When you are creating the route from /application/config/routing/web.php, you need to make sure that the request path ends with your Vue application folder name. That guarantees a that your app acts as a Single Page Application. Any additional routes from that point on need to be handled from the Vue application routes.

Route::get('/<any path>/<your app folder name>', function() { 
    return view('Client/app', array('appName' => <name of the app folder>, 'app' => '<name of the markup file of the vue app'>, <any other data to pass>));
});

Notice: Specifying the name of the markup file of the Vue app is key for the server to hand off the rendering of the UI to the client side.

If the server handles the routes then who is responsible for sending the requests? - The answer is in the next section.

Next Section: Requests