https://github.com/mgdsoft/symfony-profiler-spa

For lovers of SPA and symfony profiler
https://github.com/mgdsoft/symfony-profiler-spa

ajax development profiler spa symfony

Last synced: 1 day ago
JSON representation

For lovers of SPA and symfony profiler

• Host: GitHub
• URL: https://github.com/mgdsoft/symfony-profiler-spa
• Owner: MGDSoft
• License: mit
• Created: 2023-04-06T18:23:49.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-10-26T21:59:24.000Z (3 months ago)
• Last Synced: 2025-01-27T19:08:53.710Z (3 days ago)
• Topics: ajax, development, profiler, spa, symfony
• Language: JavaScript
• Homepage:
• Size: 308 KB
• Stars: 7
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Symfony profiler for your SPA (Single page application)

![Symfony Sersion](https://img.shields.io/badge/Symfony-5/6-purple.svg?style=flat-square&logo=symfony)

![php Version](https://img.shields.io/badge/php-7/8-blueviolet)

![Licence](https://img.shields.io/badge/Licence-MIT-brightgreen)

![example](https://github.com/MGDSoft/symfony-profiler-spa/blob/main/docs/example_profiler_spa.png?raw=true "photo")

### Here's a quick installation guide

Install the bundle into your **API PROJECT**

```shell

composer req mgdsoft/symfony-profiler-spa --dev

```

Add the new route to your **API PROJECT**:

```yaml

# config/routes/web_profiler.yaml

when@dev:

    mgd_profiler_spa:

        resource: '@SymfonyProfilerSPABundle/Resources/config/routing/routing.yml'

        prefix: /

```

Create the asset or copy if you are not using asset component:

```shell

bin/console assets:install

```

This execution will copy 'load_toolbar_spa.js' file to your public folder, you only have to include it in your html file

to your **FRONTEND project**:

```html

```

That's all! The `load_toolbar_spa.js` is created in vanilla JavaScript, so it's available for use in all frameworks and

libraries. Interceptors available for XHR and fetch.

### JS Config

For custom url toolbar you have to use this custom attribute `data-url-toolbar`

```html

```

## How it works

If you take a look inside `src/Resources/public/load_toolbar_spa.js`, you'll find a simple script that creates an HTTP

interceptor. The first `x-debug-token-link` header it detects will trigger a request to the API server to retrieve the

profiler.

![example](https://github.com/MGDSoft/symfony-profiler-spa/blob/main/docs/example_profiler_spa_loading_profile.gif?raw=true "loading profile")

## Trouble with CORS

Dont forget your nginx configuration to avoid cors

```nginx

add_header Access-Control-Allow-Origin "http://yourdomain.lol";

add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";

add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept, Authorization, x-debug-token-link, X-Debug-Token";

add_header Access-Control-Expose-Headers "X-Debug-Token, X-Debug-Token-Link";

```

## Cool things

Don't forget to configure your IDE to open errors/controllers, and for more information, please visit https://symfony.com/doc/current/reference/configuration/framework.html#ide.

If you have trouble configuring PHPStorm, you can use this snippet for a quick solution.

```yaml

parameters:

    env(SYMFONY_IDE): "javascript: (function () { let file = '%%f'; file = file.replace('/var/www/your-project/', ''); let newUrl = 'http://localhost:63342/api/file?file='+file+'&line=%%l'; fetch(newUrl); })()"

framework:

    ide: '%env(SYMFONY_IDE)%'

```

Replace `/var/www/your-project/` with the current path of your project. It works using relative paths, so it will work in Docker. For more information, please visit https://www.develar.org/idea-rest-api/."

Enjoy!