Package: masonite-inertia
IntroductionInertia is a new approach to building classic server-driven web apps. From their own web page:Inertia allows you to create fully client-side rendered, single-page apps, without much of the complexity that comes with modern SPAs. It does this by leveraging existing server-side frameworks.Inertia requires an adapter for each backend framework. This repo contains the Masonite server-side adapter forInertia.js.
You can find the legacy Inertia PingCRM demo with Masonite heredemo (WIP).Documentation 📚Quick Start ⚡️FeaturesAlmost all features of the official server-side adapters are present 😃Shared dataPartial reloadsLazy loaded propsSet root view in a providerSet root view per viewEnable sharing Masonite routes (prefer usingmasonite-js-routes)Enable sharing Masonite flash messagesOfficial Masonite DocumentationNew to Masonite ? Please first read theOfficial Documentation.
Masonite strives to have extremely comprehensive documentation 😃. It would be wise to go through the tutorials there.
If you find any discrepencies or anything that doesn't make sense, be sure to comment directly on the documentation to start a discussion!Hop onMasonite Discord Communityto ask any questions you need!InstallationRequirementsTo get started you will need the following:Masonite 4.X (usemasonite-inertia>=4.0) / Masonite 3.X(usemasonite-inertia>=3.0) / Masonite 2.3 (usemasonite-inertia>=2.X<3.0)Laravel Mix installed (new Masonite projects come with this installed already)a Node.js environment (npm or yarn)pipinstallmasonite-inertiaInstall NPM dependenciesFirst we'll need to install some NPM packages (we are using Vue 3 here as frontend framework andinertia-vue3as Inertia.js client-side adapter). You can find more info on this onInertia.js documentation.npm install vue @inertiajs/inertia @inertiajs/inertia-vue3ConfigurationAdd InertiaProvider to your project inconfig/providers.py:# config/providers.py# ...frommasonite.inertiaimportInertiaProvider# ...PROVIDERS=[# ...# Third Party ProvidersInertiaProvider,]Inertia adapter comes with a middleware that will control some of the flow of data. Add InertiaMiddleware to your project inHttpKernel:# AppHttpKernel.pyfrommasonite.inertiaimportInertiaMiddlewareclassAppHttpKernel(HttpKernel):http_middleware=[InertiaMiddleware,EncryptCookies]Make sure that this middleware is added before the EncryptCookies middleware else you will get
some issues with CSRF token validation asXSRF-TOKENvalue won't be encrypted.Finally if you want to change some parameters you can publish the package configuration file in your project:pythoncraftpackage:publishinertiaCongratulations! You have now setup Inertia in your project! For more information on how to use Inertia.js got to itsdocumentation.Getting startedThis section quickly explains how to use Inertia.js with Masonite. For more details pleaseread the documentation 📚.How to use Inertia.js with Masonite adapterWe will create two routes and a controller which will load the two components scaffolded with previous command and see Inertia.js behaviour. In order to create Inertia response in our Controller, we are going to use newly available responseInertia. And that's it !If you scaffolded the inertia demo you will already have the files, else:python craft controller WelcomeControllerThis will create a controllerWelcomeControllerbut you can name it whatever you like. It would be good to keep the standard of whatever setup you have now for your home page. Then create two routes to that controller if you don't have them already:ROUTES=[Route.get('/','WelcomeController@index'),Route.get('/helloworld','WelcomeController@helloworld')]And finally create the controller methods. We just need to use the newInertiato render our controller.# app/controllers/InertiaController.pyfrommasonite.inertiaimportInertia## ..definertia(self,view:Inertia):returnview.render('Index')defhelloworld(self,view:Inertia):returnview.render('HelloWorld')## ..This controller will render the view based on templatetemplates/app.htmland will load the Vue components into it depending on the route.
Note that instead of specifying a Jinja template like we normally do we can just specify a page here. So since we have../pages/Index.vuewe specify to renderIndexhere.Test it !Ok now we need to do 2 more commands. The first thing is to runnpm run dev(at root) to compile all of this (with webpack mix):npm run devNow we can run the server like we normally do:python craft serveWhen we go to our homepage we will see we seeIndex.vuecomponent:Home PageClick on the link you can now seeHelloWorldwithout page refresh !!!!ContributingPlease read theContributing Documentationhere.MaintainersSamuel GirardinThanks toJoseph Mancusofor making the PoC to couple Masonite and Inertia.js !LicenseMasonite Inertia is open-sourced software licensed under theMIT license.