Django-React Boilerplate: streamline your development

<p>Here at Vinta we believe that programmers, not processes, nor code, are the most important assets on software engineering. Due to that, we believe in using every tool available in order to facilitate our programmers' lives. One of our favorites is our boilerplate. If you are unfamiliar with the concept, a boilerplate is "any code block that is reusable in new contexts with minimal alteration". In this post, we will show you guys some examples of famous boilerplates, why we did our own, and how it looks so far, so you feel comfortable with using it or editing it to fit what you need.</p><h3 id="famous-boilerplates-around-and-why-to-use-them">Famous boilerplates around and why to use them</h3><p>You probably have already seen some boilerplates around, it can be the simplest bits of code or even a default project template for Django. They are all templates, and it's easy to see their advantages. On this lower level of complexity, they are good to guarantee coding standards across projects. But you can check more complex ones like the <a href="https://html5boilerplate.com/">HTML5 boilerplate</a>, the <a href="https://github.com/pydanny/cookiecutter-django">Cookiecutter Django</a>, the <a href="https://github.com/DrkSephy/django-hackathon-starter">Django Hackathon Starter</a> or even <a href="https://github.com/vintasoftware/boilerplate">Vinta's boilerplate</a> (which comes with a whole set of facilities we will discuss in a moment). These bring even more advantages to the table such as a speed-up on the initial project.</p><h3 id="how-about-building-your-own">How about building your own?</h3><p>We believe that the best solution still is to create your own boilerplate, besides increasing the benefits already listed here, you'd also get:</p><ul><li>a Full-stack solution custom-fit to your environment</li><li>an easy way to create and maintain guidelines for your projects company-wide</li><li>reduced errors</li><li>keep the project template updated</li></ul><p>the idea behind making your own boilerplate is simple: no one knows the needs of your company better than you. So the first thing you should do in order to build your own, first write down and discuss around the company "what should all of our projects have in common?". This list can go from email sending to VR integration but it's really important to get a list of what are common needs among the projects in your company.</p><p>Here is a list of what we thought necessary here at Vinta and the technologies we chose for those needs:</p><ul><li>Backend Framework (<a href="https://docs.djangoproject.com/en/1.10/releases/1.10/">Django 1.10</a> and <a href="https://github.com/noirbizarre/django.js/">Django.js</a>)</li><li>Email Sending (<a href="https://sendgrid.com/docs/API_Reference/Web_API_v3/index.html">Sendgrid</a>)</li><li>Responsive Styling (<a href="https://v4-alpha.getbootstrap.com/">Bootstrap Alpha 4.2</a>)*</li><li>Periodic Jobs (<a href="http://redis.io/">Redis</a> and <a href="https://docs.celeryproject.org/en/stable/">Celery</a>)</li><li>Interactive UI (<a href="https://facebook.github.io/react/">React</a>)</li><li>Continuous Integration (<a href="https://circleci.com/">CircleCI</a>)</li><li>Handling Static Assets (<a href="https://github.com/webpack/webpack">Webpack</a>)</li><li>Static Files Serving (<a href="http://whitenoise.evans.io/en/stable/">WhiteNoise</a>)</li><li>Database (<a href="https://www.postgresql.org/">PostgreSQL</a>)</li><li>Easy Deployments (<a href="https://blog.heroku.com/heroku-button">Heroku Button</a>)</li><li>Logging (<a href="https://papertrailapp.com/">Papertrail</a>)</li><li>Performance Monitoring (<a href="https://opbeat.com/django">Opbeat</a>)</li></ul><blockquote>As you can notice, we use the Alpha version of Bootstrap 4, we strongly encourage you to use it instead of Bootstrap 3, there is a huge list of improvements, for us the best thing is that it got way easier to customize elements and that opened a lot of design options. You can check other advantages <a href="http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/">here</a>.</blockquote><h3 id="vinta-boilerplate">Vinta Boilerplate</h3><p>To show you how easy it gets with your own boilerplate, here is the actual structure of a project using Vinta's boilerplate:</p><figure class="kg-card kg-image-card"><img src="https://vinta-cms.s3.amazonaws.com/media/filer_public/94/40/9440d322-ee54-4fd7-8294-611c798ea549/boilerplate.png" class="kg-image" alt="Alt text"></figure><p>To start coding is easy. Most people don't know that the <code>django-admin startproject</code> command can receive arguments to open on a specific boilerplate, so just use the command <code>django-admin startproject theprojectname --extension py, yml, json --nameProcfile --template=https://github.com/vintasoftware/boilerplate/archive/master.zip</code> then check for dependencies using these lines:</p><pre><code>>>> pip install -r requirements-to-freeze.txt >>> pip freeze > requirements.txt >>> npm update --save >>> npm outdated </code></pre><p>Update everything that was flagged as outdated, change the first line of README to the name of the project.</p><p>The last step would be to set up the migrations, as follows:</p><ul><li>Create a copy of <code>/settings/local.py.example</code> in <code>/settings/local.py</code></li><li>Create a .env file in the root of the project and add <code>DJANGO_SETTINGS-MODULE=".settings.local"</code> to it</li><li>Create the migrations for <code>users</code> app: <code>python manage.py makemigrations</code></li><li>Run the migrations: <code>python manage.py migrate</code></li></ul><p>After you start coding, one of the biggest perks is using CircleCI. As said above, we use it for continuous integration, for those who don't remember, continuous integration is: "The practice of merging all developer working copies to a shared mainline several times a day." and that requires a high level of automation with tools, as well as a internal habits to deploy minimal amounts of code. Down here is how a deploy looks like with CircleCI for us. You can check more about the subject <a href="https://en.wikipedia.org/wiki/Continuous_integration">here</a>.</p><figure class="kg-card kg-image-card"><img src="https://vinta-cms.s3.amazonaws.com/media/filer_public/1a/3f/1a3f01cc-c2e7-4eb6-b360-53c649835a6b/circleci.png" class="kg-image" alt="Alt text"></figure><p>if you have any doubts be sure to comment down below and check out the other posts on our <a href="http://www.vinta.com.br/blog/">blog</a>!</p>

Django-React Boilerplate: streamline your development

Join the Tech Forward newsletter

Related articles

Django CORS: handling cross-origin requests

Building secure patient-provider communication: a Medplum Chat App example

Pull Requests: Merging good practices into your project (part 1)