Nette Documentation Preview

syntax
Create Your First Application!
******************************

.[perex]
Get to know Nette Framework while creating a simple blog with comments. Let's begin!

After the first two chapters, you will have your own working blog and you'll be ready to publish your awesome posts, although the features will be pretty much limited after completing these two chapters. To make things nicer for your users, you should also read the following chapters and keep improving your application.

.[tip]
This tutorial assumes that you completed the [Installation |nette:installation] document and have successfully set up your tooling. It also assumes that you understand [object-oriented programming in PHP |nette:introduction-to-object-oriented-programming].

Please use PHP 8.1 or later. You can find the complete application [on GitHub |https://github.com/nette-examples/quickstart/tree/v4.0].


The Welcome Page
================

Let's start by creating a new project into the `nette-blog` directory:

```shell
composer create-project nette/web-project nette-blog
```

At this moment, the welcome page of the Web Project should be running. Try it by opening your browser and going to the following URL:

```
http://localhost/nette-blog/www/
```

and you should see the Nette Framework welcome page:

[* qs-welcome.webp .{url: http://localhost/nette-blog/www/} *]

The application works and you can now start making changes to it.

.[note]
If you have a problem, [try these few tips |nette:troubleshooting#Nette Is Not Working, White Page Is Displayed].


Web Project’s Content
=====================

Web Project has the following structure:

/--pre
<b>nette-blog/</b>
├── <b>app/</b>              ← application directory
│   ├── <b>Core/</b>         ← basic necessary classes
│   ├── <b>UI/</b>           ← presenters, templates & co.
│   │   └── <b>Home/</b>     ← Home presenter directory
│   └── <b>Bootstrap.php</b> ← booting class Bootstrap
├── <b>bin/</b>              ← scripts for the command line
├── <b>config/</b>           ← configuration files
├── <b>log/</b>              ← error logs
├── <b>temp/</b>             ← temporary files, cache, …
├── <b>vendor/</b>           ← libraries installed by Composer
│   └── <b>autoload.php</b>  ← autoloading of libraries installed by Composer
└── <b>www/</b>              ← public folder - the only place accessible from browser
    └── <b>index.php</b>     ← initial file that launches the application
\--

Directory `www` is supposed to store images, JavaScript, CSS, and other publicly available files. This is the only directory directly accessible from the browser, so you can point the root directory of your web server here (you can configure it in Apache, but let’s do it later as it’s not important right now).

The most important directory for you is `app/`. You can find `Bootstrap.php` file there, inside which is a class that loads the framework and configures the application. It activates [autoloading |robot-loader:] and sets up the [debugger |tracy:] and [routes |application:routing].


Cleanup
=======

The Web Project contains a welcome page, which we can remove - feel free to delete the `app/UI/Home/default.latte` file and replace it with the text "Hello world!".


[* qs-hello.webp .{url:-} *]


Tracy (Debugger)
================

An extremely important tool for development is [a debugger called Tracy |tracy:]. Try to make some errors in your `app/UI/Home/HomePresenter.php` file (e.g. remove a curly bracket from the definition of class HomePresenter) and see what happens. A red-screen page will pop up with an understandable error description.

[* qs-tracy.avif .{url:-}(debugger screen) *]

Tracy will significantly help you while hunting down errors. Also note the floating Tracy Bar in the bottom right corner, which informs you about important runtime data.

[* qs-tracybar.webp .{url:-} *]

In the production mode, Tracy is, of course, disabled and does not reveal any sensitive information. All errors are saved into `log/` directory instead. Just try it out. In `app/Bootstrap.php`, find the following piece of code, uncomment the line and change the method call parameter to `false`, so it looks like this:

```php .{file:app/Bootstrap.php}
...
$this->configurator->setDebugMode(false);
...
```

After refreshing the web page, the red-screen page will be replaced with the user-friendly message:

[* qs-fatal.webp .{url:-}(error screen) *]

Now, look into the `log/` directory. You can find the error log there (in exception.log file) and also the page with the error message (saved in an HTML file with a name starting with `exception`).

Comment line `// $configurator->setDebugMode(false);` again. Tracy automatically enables development mode on `localhost` environment and disables it elsewhere.

Now, we can fix the bug and continue designing our application.


Send thanks
===========

We will show you a trick that will make open source authors happy. You can easily give a star on GitHub to the libraries that your project uses. Just run:

```shell
composer thanks
```

Try it!

{{priority: -1}}
{{sitename: Nette Quickstart}}

Create Your First Application!

Get to know Nette Framework while creating a simple blog with comments. Let's begin!

After the first two chapters, you will have your own working blog and you'll be ready to publish your awesome posts, although the features will be pretty much limited after completing these two chapters. To make things nicer for your users, you should also read the following chapters and keep improving your application.

This tutorial assumes that you completed the Installation document and have successfully set up your tooling. It also assumes that you understand object-oriented programming in PHP.

Please use PHP 8.1 or later. You can find the complete application on GitHub.

The Welcome Page

Let's start by creating a new project into the nette-blog directory:

composer create-project nette/web-project nette-blog

At this moment, the welcome page of the Web Project should be running. Try it by opening your browser and going to the following URL:

http://localhost/nette-blog/www/

and you should see the Nette Framework welcome page:

The application works and you can now start making changes to it.

If you have a problem, try these few tips.

Web Project’s Content

Web Project has the following structure:

nette-blog/
├── app/              ← application directory
│   ├── Core/         ← basic necessary classes
│   ├── UI/           ← presenters, templates & co.
│   │   └── Home/     ← Home presenter directory
│   └── Bootstrap.php ← booting class Bootstrap
├── bin/              ← scripts for the command line
├── config/           ← configuration files
├── log/              ← error logs
├── temp/             ← temporary files, cache, …
├── vendor/           ← libraries installed by Composer
│   └── autoload.php  ← autoloading of libraries installed by Composer
└── www/              ← public folder - the only place accessible from browser
    └── index.php     ← initial file that launches the application

Directory www is supposed to store images, JavaScript, CSS, and other publicly available files. This is the only directory directly accessible from the browser, so you can point the root directory of your web server here (you can configure it in Apache, but let’s do it later as it’s not important right now).

The most important directory for you is app/. You can find Bootstrap.php file there, inside which is a class that loads the framework and configures the application. It activates autoloading and sets up the debugger and routes.

Cleanup

The Web Project contains a welcome page, which we can remove – feel free to delete the app/UI/Home/default.latte file and replace it with the text „Hello world!“.

Tracy (Debugger)

An extremely important tool for development is a debugger called Tracy. Try to make some errors in your app/UI/Home/HomePresenter.php file (e.g. remove a curly bracket from the definition of class HomePresenter) and see what happens. A red-screen page will pop up with an understandable error description.

debugger screen

Tracy will significantly help you while hunting down errors. Also note the floating Tracy Bar in the bottom right corner, which informs you about important runtime data.

In the production mode, Tracy is, of course, disabled and does not reveal any sensitive information. All errors are saved into log/ directory instead. Just try it out. In app/Bootstrap.php, find the following piece of code, uncomment the line and change the method call parameter to false, so it looks like this:

...
$this->configurator->setDebugMode(false);
...

After refreshing the web page, the red-screen page will be replaced with the user-friendly message:

error screen

Now, look into the log/ directory. You can find the error log there (in exception.log file) and also the page with the error message (saved in an HTML file with a name starting with exception).

Comment line // $configurator->setDebugMode(false); again. Tracy automatically enables development mode on localhost environment and disables it elsewhere.

Now, we can fix the bug and continue designing our application.

Send thanks

We will show you a trick that will make open source authors happy. You can easily give a star on GitHub to the libraries that your project uses. Just run:

composer thanks

Try it!