Skeletor: Django + Vue base project
Skeletor is CKC’s foundation for new web projects. It leverages everything we’ve learned over our collective decades of experience solving “super fun” problems.
Continuous deployments, great test coverage, hot reloading for frontend development.. this base project has it all!
Why is this important?
Keeps your house in order from day 1
It may not seem all that impressive from an outside perspective, but maybe to help illustrate:
Imagine that your entire day is put together and ran perfectly. Tools and best practices are meticulously put into place to solve the same problems you’ve encountered dozens of times. When you go to pick out a shirt in the morning: already laid out for you. On your way to work, but the car won’t start? No worries, there’s a battery booster behind the seat. Forgot your office key? Hide-a-key rock ready to go.
All of those little gotchas that set development back, like:
- New requirements from client/stakeholders, how do we implement these quickly without breaking everything?! (great tests)
- Basic features not working right, like password reset or emails
- Setting up staging/development environments for the umpteenth time
- Get an image of all the schema/models in the database and show how they’re connected
- If we have to onboard another developer, how do we teach them all this stuff?!
- Are all of our licenses open source/free to use?
- It’s so “annoying” to do Test Driven Development (not with Skeletor setting up everything for you!)
Onboarding new devs
Skeletor projects benefit from consistent architecture and implementation of development best practices across the board. Anyone who has a bit of experience with Python or Docker can spin up our repo in seconds. All a new developer needs to do (assuming they have Docker) is:
.. and you’re done! This spins up the database, makes a dummy user for testing and any requisite test data for your project.
With Skeletor, you get consistency, speed, and efficiency when onboarding new folks. Also, as we bring on new developers, they may have great new pieces of knowledge/experience which get compounded back into Skeletor! It is always improving.
What is Skeletor made of?
Skeletor leverages Django + Python on the backend with a suite of libraries for testing.
- We use Celery + RabbitMQ (or Redis) for asynchronous tasks like mass emails or resizing large images.
- Pytest for testing (xdist, sugar, etc. ooo ya!)
- Base classes for functional testing (selenium, cypress, detox)
- And more helpers to make Test Driven Development easy to implement, something that saves many headaches for developers and money for clients.
And we use VueJS behind NuxtJS on the frontend.
- Vuetify for styling and amazing base components
- NuxtJS packs things up nicely for you by default
- Awesome hot reloading, yay!
Why these specific choices?
Heroku over AWS or Digital Ocean Apps
Heroku works well for small-to-medium-sized apps without much need for custom backend setups.
Sometimes we move projects to AWS setups for production or the entire lifecycle. This depends on the project. However, we’ve used Heroku to put apps in production and support them for over 5 years. We love the simplicity!
With Heroku, you have to follow their requirements, like putting files in specific directories or only supporting certain packages.
These requirements are usually done for a good reason, so it’s not a huge deal. It becomes a problem when a client requires an old version of a package or a nonstandard way of running things.
Read more about what CKC thinks of Heroku vs AWS!
VueJS over React
We prefer VueJS over React for the ease of use, integration with old libraries (jQuery), and the mass amount of support the VueJS project has. It is quite a bit easier to spin new folks up on Vue, React has many more specific paradigms. Like, you can’t just add a class in React but you can in Vue.
How to use it?
You’ll clone the repo using
django-admin and the
startproject command, like so:
$ django-admin.py startproject new_project \ --template=https://github.com/ckc-org/skeletor/archive/master.zip \ --name index.md,setup,app.json,README.md
Then you’ll want to edit the README, remove the base project installation instructions, and run:
..that’s it! You have a nice base project spun up and ready to start developing on.
Let us setup a project for you!
We love crafting beautiful solutions to our client’s problems. Send us an email at [email protected]