Introduction

Setting up and starting a new project can be a very overwhelming and time-consuming process. We have to choose from a multitude of tools and libraries to install. We have to set up the structure of our project. And we have to decide the environment (or environments) we will be developing under. And then finally we can start piecing it all together and get to the coding part! Setting up and installing all these tools is a cumbersome and error-prone process. Thankfully, we can save time by turning to boilerplate to scaffold our projects. Unfortunately, depending on your framework of choice, there are also a multitude of templating applications to choose from... These applications can sometimes offer precisely what we need. But more often than not we will need to customize the resulting project to fit our own need or vision.

If you are anything like me, just the thought of all this setting up of projects and writing of boilerplate can put us off from putting pen to paper, or more correctly putting fingers to keyboard and ideas to reality.

In this series of articles, I will go through the process of creating a basic project which I can then build off to create any idea that pops into my head. I will utilise a template generated by cookiecutter-django as a starting point, then set about customising it by updating the default Gulp file, replacing the default Bootstrap library with Bulma, removing Jquery and finally installing and configuring VueJs.

 

Installation

The first thing we will need to do is install Cookiecutter. I will assume Python3 and pip are already installed. From the terminal type:

$ pip install "cookiecutter>=1.4.0"

CookieCutter is a command-line tool written in Python used to create new projects based on predefined templates, there is a multitude of predefined templates to choose from in a multitude of different languages and frameworks. For this project, I will be using Cookiecutter-django.

For this project, I will also be using Docker to ease the deployment of the application. To install Docker and Docker-Compose, please follow the instructions on the Docker website.

Now that we have everything installed let's create our project!

From the terminal create a folder for our project and cd into it

$ mkdir my_project && cd my_project

To build our project run cookiecutter against the cookiecutter-django repository. Follow the prompts answering the questions based on project needs:

$ cookiecutter https://github.com/pydanny/cookiecutter-django

The key options I selected are

  • Use_docker: yes
  • Select js task runner: Gulp
  • Custom bootstrap compilation: no

It is also quite safe to just go with the default configuration.

Now that the project has been created its a good idea to take a look around the various directories and files.

Let's start the website, first, we need to build the Docker image:

$ docker-compose -f local.yml build

Then start the Docker container:

$ docker-compose -f local.yml up

Now we can take a look at our new website complete with sign-in and authentication pages. to do this by simply visiting http://localhost:8000

This is now a great starting point for our project, but we can do more. In the next section, we will be configuring Gulp for smoother front end development.

 

Configuring Gulp

The default Gulp configuration that cookiecutter-django provides requires a few adjustments. I found I had trouble with getting the run-sequence library to work and the watch task did not run at all. After some research I decided to update Gulp to version 4, this allows us to use the new gulp.series feature.

First, uninstall any previous versions of Gulp that may be installed on the system. Then update package.json so that the line that references gulp reads:

"gulp": "^4.0.0",

Also, remove any reference to run-sequence from gulpfile.js. This includes the require statement at the top of the file:

runSequence = require('run-sequence'),

Also in gulpfile.js edit the gulp task default function so it looks like this:

gulp.task('default', gulp.series([
    'styles', 
    'scripts', 
    'imgCompression', 
    'runServer', 
    'browserSync', 
    'watch'
]))

To ensure that both BrowserSync and the Watch function work we will create a serve function:

gulp.task('serve', function(){
    browserSync.init([
        paths.css + "/*.css", 
        paths.js + "/*.js", 
        paths.templates + '/*.html'
        ], {
        proxy:  "0.0.0.0:8000"
    });
    gulp.watch(paths.sass + '/*.scss', gulp.series('styles'));
    gulp.watch(paths.css + '/*.css').on("change", reload);
    gulp.watch(paths.js + '/*.js', gulp.series('scripts')).on("change", reload);
    gulp.watch(paths.images + '/*', gulp.series('imgCompression'));
    gulp.watch(paths.templates + '/**/*.html').on("change", reload);
});

And change the default task to reflect this new function:

gulp.task('default', 
    gulp.series([
        'styles', 
        'scripts', 
        'imgCompression',  
        'runserver', 
        'serve'
    ]))

It also appears the runserver task does not run when using a Docker container. The solution I came up with was to run Docker in one terminal window then run gulp in a second terminal window. Remove runserver from the gulp.series so the final result will now look like this:

gulp.task('default', 
    gulp.series([
        'styles', 
        'scripts', 
        'imgCompression', 
        'serve'
    ]))

Now BrowserSync will pick up changes in js and CSS files, refreshing the browser when it does.

That concludes part one in this series of articles. Be sure to stay tuned for part two where we investigate gaining access to the Docker file system, adding additional packages. I will also be removing Bootstrap from our Django template and replacing it with the Bulma CSS framework.