Tutorial: Build a Basic CRUD App with Symfony 4 and Vue
This tutorial shows you how to set up a ‘quick and dirty’ modern application using a backend API written in Symfony 4 and a frontend in Vue.js, with a minimal dependencies and no hassle.
Maria Baker
The authentication part is quite useful. Thumbs up for that! https://digitalfortress.tec…
Ugo
Thank you for this tutorial, really useful !
I have a question though : how do you get errors to be logged into the server console (mostly for 500 errors). I had a few tries, but I couldn’t find a solution, and all i get is :
[Sat Sep 15 17:23:37 2018] 127.0.0.1:57080 [200]: /xxx/xxx/xxx
[Sat Sep 15 17:23:42 2018] 127.0.0.1:57093 [500]: /xxx
Ugo
I finally found a way :
* installed debug component : https://symfony.com/doc/cur…
* put -vvv at the end of the run command as : php bin/console server:run -vvv
* logs are written in project’s var/log/dev.log
DavidCrty
Very nice starter front & back.
I added a docker compose and everything work as expected ! 
yemiwebby
Great work!
Just a quick question, why didn’t you use webpack Encore to set up the frontend. Do you think separating both application is best practice or just a matter of preference ??
James Chen
Nice tut! I’m stuck at the second step of creating the moviesAction(). Once it’s created I already got this error “NotFoundHttpException
No route found for “GET /movies””
El Tebe
You can check and debug the routing settings with symfony’s cli tools.
See the official doc here: https://symfony.com/doc/cur…
El Tebe
+1
Webpack Encore is great!
yemiwebby
Yeah. I know
Krasimir Hristozov
I think separating the backend and frontend is a better pattern:
- It allows us to deploy them independently, using different strategies and schedules for testing and deployment.
- We can deploy our frontend as a static application to a CDN and achieve virtually unlimited scaling for a fraction of the cost of hosting it together with the backend.
- It allows developers to work on just the API or just the frontend without needing access to the source code of the other part of the system (this is still possible to achieve if the projects are integrated, but it’s a bit of a headache to set up).
yemiwebby
Thanks for your response. You just made my point, “its a matter of preference”
Raymond de Bernis
Hi,
trying to Authenticate I have got this 404 error
Fournisseur d’identité: Unknown
Code erreur: invalid_request
Description: The ‘redirect_uri’ parameter must be an absolute URI that is whitelisted in the client app settings.
my Okta account was created whith clientId.
any idea of what is the wrong setting??
in my main.js
Vue.use(Auth, {
issuer: 'https://dev-139773.oktaprev…,
client_id: ‘0oai0ub…1O0h7’,
redirect_uri: ‘http://localhost:8080/implicit/callback’,
scope: ‘openid profile email’
})
Raymond de Bernis
sorry not 404 but 400 for invalid request
theo
Hello !
1 question: in components/MoviesList.vue
I have two root elements in my template, so how can i fix it ?
Thanks in advance
Aaron Parecki
You need to include the full redirect URI that you are using in your code in the Okta application that you create. The default should have worked with this example, but in your code you have http://localhost:8080/implicit/callback so that is the URL that should be set as the Redirect URI in Okta.
Paul
I’m a beginner with PHP, so please forgive my lack of experience here. I’m going through this tutorial step by step and simultaneously researching the bits that don’t make sense. I’ve run into the following error while constructing the API backend:
/**
* @Route("/movies", methods=“POST”)
*/
public function create(Request $request, MovieRepository $movieRepository, EntityManagerInterface $em)
{
$request = $this->transformJsonBody($request);
if (! $request) {
return $this->respondValidationError(‘Please provide a valid request!’);
}
The transformJsonBody method is showing as undefined in my code editor (VSCode with Intelliphense). I’m also using PHP version 7.4 and Symfony v 5.2.7. I saw in the JsonResponse.php file that the create() function has been depracated, and to use __construct() instead, but I’m not sure how to implement this into my code, or if this is even the fix I need.
Paul
It’s just an issue with VSCode and extensions. For anyone trying this tutorial out now - this was written in Vue2. Keep that in mind when you do the initial vue install.