So, in the last 4 days. I have been working on a project for a contest in Romania.
My competition idea says something like that:
- I have to build a mobile application for a small town (~30K peoples), that will let a user, to temporarily hire another user, to do different kinds of jobs, like bringing you food, walk the dog, do the shopping, babysitting, bringing the clothes to the laundry, and other activities that require a small amount of movement
To build this mobile application, I should use Java for the mobile application and NodeJS for the back-end, right? Yes! You are right! But I love JavaScript!
So I went with JavaScript for back-end and NuxtJS (first) + Cordova for IOS and Android applications!
The Beginning
The project started with a simple back-end structure, written in Node.JS and a NuxtJS Project.
After finishing the design for some basic screens (Splash, login, register),
I've built the HTML and CSS for the Splash screen as a component inside the NuxtJS project, then inside the layout/default.vue, I wrote a script that switches a variable from true to false.
Using v-if and v-else, I was able to show my Splash for 3000 ms, then the Nuxt router view.
Everything was perfect! For now...
Meanwhile, I've created a Cordova project and generate the first dist/ folder. After moving the generated files from dist/ inside the www/ folder of the Cordova project, I added Android as the platform and build the first demo.
First Problem
I ran it and surprise the splash screen wasn't working
First, I thought Cordova wasn't running JavaScript because of some kind of option. I was lazy and I have not tried to check the documentation of both, only after 6 hours of trying different things, when I gave up on it, for the next day.
The next day I gave up on NuxtJS after finding some Github issue about that (which I wasn't able to find the day before, because of being tired), which tells you NuxtJS is not compatible with Cordova.
How I Solved it?
I used just VueJS instead of NuxtJS, which I chose first just because I am more familiar with it.
The Second Problem
I've built a new project using Vue-CLI and Cordova. After that, I've built again the Splash screen and this time, the Login screen.
Meanwhile, I integrated vue-route-middleware to help me build easier middlewares in an elegant style, and set the mode to history.
After that, I've built a middleware that redirects to /login if a state variable is empty.
And then I've repeated the app-building process.
Well, now redirecting was not working! The App punched me in the face, again. I gave up on it. The next day I tried Ionic with React, and here I failed, because the docs weren't clear about the status bar plugin... that was another problem!
How I Solved it?
That night I found a Github issue to the same problem that I had with the VueJS + Cordova pack, and that issue topic was talking about the fact that Cordova is not able to redirect a Vue build application, that is using mode:"history"
Conclusion?
- You should always check for a solution online, do not waste your time. Some frameworks things might not be documented!
- It is my first mobile app project using VueJS and Cordova, and I learned a lot from basic things.
- Always you should learn from your mistakes.
- You should always keep learning, doing what you love to do
- Remember FAIL means "First Attempt Into Learning!"
About the project, if anybody is curious it will be open source in the next months on my Github 😀
Top comments (5)
Great findings Gabriel, good luck with the competition!
Have you used Vue's Cordova plugin? It basically allows you to code on your PC and (optionally) have the result appear immediately on your phone (hot reloading). It also makes the building process one command away.
Jonathansblog.co.uk/adding-cordova-to-an-existing-vue-app
Thank you!
I had a look on that plugin, but is not necessary for me. At least for this project.
No frameworks no cry haha xd
Maybe xD
Maybe try Quasar, it lets you get everything from one code base (PWA, Mobile App, Electron etc.)