Laravel Nano Jsx Preset

jrson83

A Laravel frontend preset for initial Nano JSX scaffolding, based on wewowweb/laravel-svelte-preset.

Laravel Nano JSX Preset

A Laravel frontend preset for initial Nano JSX scaffolding, based on wewowweb/laravel-svelte-preset by We Wow Web / Gal Jakic.

Why?

Nano JSX is a lightweight 1kB JSX library designed to build ultra fast MPAs and SPAs, created by @Yannick Deubel. It uses a different approach than other JSX libraries like React, Preact or Inferno. Nano JSX is really close to the DOM. There is no Virtual DOM and you can manipulate the DOM as you want. You can even call Nano.render() inside a Component, which then renders some JSX code to manage another part of your app.

If you want to find out more about Nano JSX, check out the Git Repository or the official website.

SSR support?

This package does currently not support SSR, only client-side routing and full render/hydration of pages, which is not intended to be the concept of Nano JSX. This preset can be used to start developing SSR with spatie/laravel-server-side-rendering and I probably will release another repo with SSR support, when it's ready.

This package is still in active development, so you might want to watch the repository to be notified of future changes.

Installation

You can install the package via composer:

composer require jrson83/laravel-nano-jsx-preset

After that, run the following command, which will provide you with the initial scaffolding of the project:

php artisan ui nanojsx

To install the JavaScript dependencies, run:

npm install && npm run dev

The package will provide you with the initial set of files:

/js/app.tsx
/js/components/App.tsx
/views/nanojsx.blade.php
/sass/app.scss
tsconfig.json
webpack.mix.js

needed to start developing with Laravel & Nano JSX.

Usage

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Laravel Nano JSX App</title>
    <link rel="stylesheet" href="{{ mix('css/app.css') }}">
    <!-- Include the app.js file -->
    <script src="{{ mix('js/app.js') }}" defer></script>
  </head>
  <body>
    <!-- App Component will be rendered here -->
  </body>
</html>

Create routes

Create a new route inside routes/web.php:

Route::get('/{path?}', function() {
  return view('nanojsx');
})->where('path', '.*');

Changelog

Please see CHANGELOG for more information what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security

If you discover any security related issues, please email me@jrson.de instead of using the issue tracker.

Credits

License

The MIT License (MIT). Please see License File for more information.

Top categories