Quite some gap since my previous post, isn't it? Making a change like what I planned (see title of the post 😥) to is easier said than done, for two reasons:
Without getting a decent hold on Vue Js, it is not a good idea to proceed in my opinion. For that matter, without knowing the features of a framework, not just Vue, anything for that matter, one should not step in too deep. We can perform simple bug fixes and modifications with just basic knowledge and an understanding of the application in the picture, but beyond that is a risk. We will be spending an unnecessarily long time on simple fixes.
Introducing a frontend framework in an already working codebase with a lot of nuts and bolts becomes tricky. In Wobu's case, one major configuration I did after setting up the cookie-cutter Django project was integrating Tailwind Css. That was not as simple as importing Tailwind's Css, it had a lot of steps to be performed. Infact, I planned to share the same in a future post. Now that plans changed, it may not hold good 😁
Difficulties faced
I wouldn't say there were a lot of hiccups, but there was a major one. On building the Vue project, the assets folder was not copied fully to Django's static folder. CSS and SVG files were always missing.
One reason may have been the manual removal of Tailwind related configuration from my Django project. I removed quite a few folders and entries in multiple files.
Another reason is the configuration difference between a plain vanilla Django project and a cookie-cutter Django project.
The biggest one was, my Django project already had a lot of code from a template perspective.
What worked in the end
Fixing path related issues, version related issues, and quite a few other options, didn't help. Hence, for the time being, I decided to take an alternate route. I kept aside the cookiecutter Django project, instead created a plain vanilla one, applied all my changes and then worked on the integration, and it worked.
Closing thoughts
Troubleshooting is also an art, it's tougher than development is what I've realized many a time 😀. It needs a different knack for things, a different thought process. Depending on the time you have in hand, sometimes you may be forced to put in a dirty fix, I wouldn't say it's a crime. Just make sure to go back to put in the correct fix at a later point in time. These are a few decisions that need to be made as a team.
In the coming weeks, there may be again a small delay in updating my progress in Wobu. Primarily because there's a lot to digest with Vue.
Stay tuned and I will come back with an interesting update soon!
