Symfony Demo App + Vue + Encore + Offline plugin + Service worker + Manifest Ready

[tawfekov]

I've prepared a Symfony demo App that includes :

1. Vue.js + Vue Router
2. Offline Plugin , it caches the static assets serves them from cache but I couldn't make send 200 header when going offline yet
3. Web mainfest
4. basic Service worker file that can be used to send push notification
5. buefy
6. bulma.io css framework
7. [push notifications / web push protocol , partial support as of 09/Aug ]

an online demo can be found on this url : https://elastic.live/ or in this repo : https://github.com/tawfekov/SymfonyVue/

I think it can be a good starting point for SPA Symfony based apps

what do you think ? looking for more ideas
Thanks

P.S I've placed it here because I noticed that demo repo folks declined any requests about angularjs demo

[weaverryan]

Wow, this is very interesting! I would love to add another link for another demo - thanks :). I'll check out your demo - I have some comments / questions about some details.

Cheers!

[mgiraud]

This is great !
Could you provide a nginx configuration that can make it works with the vue-router history mode ?
Thx

[tawfekov]

Hi @mgiraud ,
in my testing env (aka bin/console server:start ) I used to add these lines in routing.yml

spa:
    path:  /{path}
    defaults: { _controller: AppBundle:Default:index, path: '' }
    requirements:
        path: .*

however its not the case for nginx setup ، as far as I know nginx routes all requests to app.php or app_dev.php but symfony will throw 404 error in case no route matched

the above mentioned snippet didn't work on real nginx setup , I believe adding an event listener to kernel.exception Event would make it but I didn't tested it yet , here is a docs link in case you are in hurry , please update us here about your findings.

Thanks

[mgiraud]

Thx for your answer,

Indeed Symfony throws a 404 error so i have add the "fallback" route and it seems to work (haven't checked everything yet)

[tawfekov]

@mgiraud , I was able to get it working , you can check it on : https://elastic.live/demo , you will directly redirected to the specific vue route 😃 , would you please take a look at my changes on my repo (mentioned above) , there is some extra testing code about web push protocol , feel free to discard it , its not fully tested

P.S the site is using the dev env

[mgiraud]

@tawfekov I wonder if redirecting to homepage is a bit overkill. Suppose you have a REST API and you are fetching a data by id or slug -> article/that-slug.
If no article has the 'that-slug' slug you are supposed to respond with a 404. But with your listener you will respond a 302 which means FOUND and may not be supported by the client.

BTW: Careful with the dev environment, your keys are exposed ^^

[tawfekov]

I agree, it not the best approach out there , not even a standard one but its an idea that works , I'll keep trying to find a proper solution for it , if you have an idea , please share it

about the keys , Yes , I'm aware of it , this site is mainly for testing , I'll change the keys soon 👍 , thanks for the heads up

[tawfekov]

@mgiraud I've removed the event listener , right now my recipe is about these lines in the controller routes annotations :

/**
  * @Route("/", name="homepage")
  * @Route("/{route}", name="vue_sub_pages", requirements={"route"=".+"})
  */

or

/**
  * @Route("/", name="homepage")
  * @Route("/{route}", name="vue_sub_pages", requirements={"route"="demo|hello|home"})
  */

this won't send 302 redirection headers as you may see and it gives you a finer control over your other routes in ur project

[birkof]

@tawfekov how about Workbox from Google?

[tawfekov]

thank you @birkof , its nice suggestion , workbox wasn't born yet when I created this pull request but as for today , I'd really consider it

[rnbwspctrm]

Has anyone tried integrating workbox into encore? I am attempting now and am running into issues.

[niketpathak]

The live demo doesn't work anymore. For a finer control over routing, you may wanna check out this article https://digitalfortress.tech/tutorial/symfony-vuejs-routing/