Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/girardinsamuel/masonite-inertia
Server-side Masonite adapter for Inertia.js
https://github.com/girardinsamuel/masonite-inertia
inertiajs masonite masonite-package python
Last synced: 25 days ago
JSON representation
Server-side Masonite adapter for Inertia.js
- Host: GitHub
- URL: https://github.com/girardinsamuel/masonite-inertia
- Owner: girardinsamuel
- License: mit
- Created: 2020-09-26T14:40:01.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2024-03-01T00:53:00.000Z (8 months ago)
- Last Synced: 2024-09-13T23:46:20.867Z (about 2 months ago)
- Topics: inertiajs, masonite, masonite-package, python
- Language: Python
- Homepage: https://samuelgirardin.gitbook.io/masonite-inertia
- Size: 2.11 MB
- Stars: 23
- Watchers: 3
- Forks: 6
- Open Issues: 30
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Support: docs/support.md
Awesome Lists containing this project
- awesome-inertiajs - Masonite
README
## Introduction
Inertia 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 for [Inertia.js](https://inertiajs.com/).
You can find the legacy Inertia PingCRM demo with Masonite here [demo (WIP)](https://github.com/girardinsamuel/pingcrm-masonite).
[Documentation 📚](https://samuelgirardin.gitbook.io/masonite-inertia)
[Quick Start ⚡️](#installation)
## Features
Almost all features of the official server-side adapters are present 😃
- Shared data
- Partial reloads
- Lazy loaded props
- Set root view in a provider
- Set root view per view
- Enable sharing Masonite routes (prefer using [masonite-js-routes](https://github.com/girardinsamuel/masonite-js-routes))
- Enable sharing Masonite flash messages
## Official Masonite Documentation
New to Masonite ? Please first read the [Official Documentation](https://docs.masoniteproject.com/).
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 on [Masonite Discord Community](https://discord.gg/TwKeFahmPZ) to ask any questions you need!
## Installation
**Requirements**
To get started you will need the following:
- Masonite 4.X (use `masonite-inertia>=4.0`) / Masonite 3.X(use `masonite-inertia>=3.0`) / Masonite 2.3 (use `masonite-inertia>=2.X<3.0`)
- Laravel Mix installed (new Masonite projects come with this installed already)
- a Node.js environment (npm or yarn)
```bash
pip install masonite-inertia
```
**Install NPM dependencies**
First we'll need to install some NPM packages (we are using Vue 3 here as frontend framework and `inertia-vue3` as Inertia.js client-side adapter). You can find more info on this on [Inertia.js documentation](https://inertiajs.com/client-side-setup).
```
npm install vue @inertiajs/inertia @inertiajs/inertia-vue3
```
## Configuration
Add InertiaProvider to your project in `config/providers.py`:
```python
# config/providers.py
# ...
from masonite.inertia import InertiaProvider
# ...
PROVIDERS = [
# ...
# Third Party Providers
InertiaProvider,
]
```
Inertia adapter comes with a middleware that will control some of the flow of data. Add InertiaMiddleware to your project in `HttpKernel`:
```python
# AppHttpKernel.py
from masonite.inertia import InertiaMiddleware
class AppHttpKernel(HttpKernel):
http_middleware = [InertiaMiddleware]
route_middleware = {
"web": [EncryptCookies, SessionMiddleware, VerifyCsrfToken]
}
```
Make sure that this middleware is added in HTTP middlewares and that EncryptCookies middleware is added as a route middleware else you will get some issues with CSRF token validation as `XSRF-TOKEN` value won't be encrypted.
Finally if you want to change some parameters you can publish the package configuration file in your project:
```bash
python craft package:publish inertia
```
Congratulations! You have now setup Inertia in your project! For more information on how to use Inertia.js got to its [documentation](https://inertiajs.com/installation).
## Getting started
This section quickly explains how to use Inertia.js with Masonite. For more details please [read the documentation 📚](https://samuelgirardin.gitbook.io/masonite-inertia).
### How to use Inertia.js with Masonite adapter
We 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 response `Inertia`. And that's it !
If you scaffolded the inertia demo you will already have the files, else:
```
python craft controller WelcomeController
```
This will create a controller `WelcomeController` but 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:
```python
ROUTES = [
Route.get('/', 'WelcomeController@index'),
Route.get('/helloworld', 'WelcomeController@helloworld')
]
```
And finally create the controller methods. We just need to use the new `Inertia` to render our controller.
```python
# app/controllers/InertiaController.py
from masonite.inertia import Inertia
## ..
def inertia(self, view: Inertia):
return view.render('Index')
def helloworld(self, view: Inertia):
return view.render('HelloWorld')
## ..
```
This controller will render the view based on template `templates/app.html` and 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.vue` we specify to render `Index` here.
### Test it !
Ok now we need to do 2 more commands. The first thing is to run `npm run dev` (at root) to compile all of this (with webpack mix):
```
npm run dev
```
Now we can run the server like we normally do:
```
python craft serve
```
When we go to our homepage we will see we see `Index.vue` component:
```
Home Page
```
Click on the link you can now see `HelloWorld` without page refresh !!!!
## Contributing
Please read the [Contributing Documentation](CONTRIBUTING.md) here.
## Maintainers
- [Samuel Girardin](https://www.github.com/girardinsamuel)
Thanks to [Joseph Mancuso](https://github.com/josephmancuso) for making the PoC to couple Masonite and Inertia.js !
## License
Masonite Inertia is open-sourced software licensed under the [MIT license](LICENSE).