95 lines
3.5 KiB
Markdown
Executable File
95 lines
3.5 KiB
Markdown
Executable File
Nette Vite
|
|
=================
|
|
|
|
This is a simple, skeleton application using the [Nette](https://nette.org). This is meant to
|
|
be used as a starting point for your new projects.
|
|
|
|
[Nette](https://nette.org) is a popular tool for PHP web development.
|
|
It is designed to be the most usable and friendliest as possible. It focuses
|
|
on security and performance and is definitely one of the safest PHP frameworks.
|
|
|
|
If you like Nette, **[please make a donation now](https://nette.org/donate)**.
|
|
|
|
In addition, this skeleton provides complete solution for fast, compelling applications with a minimal amount of effort.
|
|
|
|
* [Vite](https://vitejs.dev/) - next generation frontend tooling
|
|
* [Tailwind 3+](https://tailwindcss.com/) - a utility-first CSS framework packed with classes
|
|
* [Stimulus 3+](https://stimulus.hotwired.dev/) - designed to augment your HTML with just enough behavior to make it shine
|
|
* [Turbo 7+](https://turbo.hotwired.dev/) - accelerates links and form submissions by negating the need for full page reloads
|
|
|
|
Requirements
|
|
------------
|
|
|
|
- PHP 8.0
|
|
- Node.js LTS
|
|
- Docker
|
|
|
|
|
|
Local Setup
|
|
------------
|
|
|
|
The best way to install Web Project locally is using Docker. If you don't have Docker yet,
|
|
download it following [the instructions](https://www.docker.com/products/docker-desktop).
|
|
|
|
Use following commands:
|
|
|
|
mkdir nette-vite && cd nette-vite
|
|
git clone --depth 1 https://github.com/evromalarkey/nette-vite.git . && npm i
|
|
|
|
That downloads the project from Github, installs `package.json` dependencies. After that you can serve your project from localhost
|
|
|
|
docker compose up
|
|
npm run dev
|
|
|
|
Then visit `http://localhost` in your browser to see the welcome page.
|
|
|
|
JS and CSS files are served via Vite, directly from sources. Any file changes reloads the browsers for fast local development.
|
|
|
|
> On Windows it's recommended to use **WSL2** to run everything (Docker, Node.js via nvm), it's the best approach. Otherwise, some docker scripts inside package.json would work only in PowerShell.
|
|
|
|
> When correct Node.js version is set in **PhpStorm** (WSL2 on Windows), you can use build-in npm to install dependencies or run scripts via GUI.
|
|
|
|
|
|
Production Setup
|
|
----------------
|
|
|
|
Make directories `temp/` and `log/` writable.
|
|
|
|
For Apache or Nginx, setup a virtual host to point to the `www/` directory of the project and you
|
|
should be ready to go.
|
|
|
|
**It is CRITICAL that whole `app/`, `config/`, `log/` and `temp/` directories are not accessible directly
|
|
via a web browser. See [security warning](https://nette.org/security-warning).**
|
|
|
|
Vite
|
|
----------------
|
|
There are few possible ways how to load assets with Vite in your latte templates.
|
|
|
|
Option 1 - print all `<script>` and `<link>` tags automatically, with this you have to include css in `.js`
|
|
```latte
|
|
{$vite->printTags('src/scripts/main.js')}
|
|
```
|
|
|
|
Option 2 - same as first option, but you have more control over your HTML
|
|
```latte
|
|
{if $vite->isEnabled()}
|
|
<script type="module" src="{='@vite/client'|asset}"></script>
|
|
{else}
|
|
{foreach $vite->getCssAssets('src/scripts/main.js') as $path}
|
|
<link rel="stylesheet" href="{$path}">
|
|
{/foreach}
|
|
{/if}
|
|
|
|
<script src="{='src/scripts/main.js'|asset}" type="module"></script>
|
|
```
|
|
|
|
Option 3 - most basic, but currently not possible for production, due Vite drawback - [vitejs/vite#6595](https://github.com/vitejs/vite/issues/6595)
|
|
```latte
|
|
{if $vite->isEnabled()}
|
|
<script type="module" src="{='@vite/client'|asset}"></script>
|
|
{/if}
|
|
|
|
<script src="{='src/scripts/main.js'|asset}" type="module"></script>
|
|
<link rel="stylesheet" href="{='src/styles/main.css'|asset}">
|
|
```
|