A set of tools for a freelance webdev workflow

Half a year ago, I moved to the Netherlands to study. I'm attending a masters program in CS and Data Science at Leiden University. I've been busy with school and freelance work so I haven't blogged in a while. I feel it's time for a little update.

I've been working on freelance web projects for a couple of clients. For those projects, I wanted to use the opportunity to improve and streamline my workflows and selection of tools. In this post I'll briefly discuss each piece of tech in my stack.

My requirements:

  • A focus on JavaScript
  • Fast prototyping
  • Simple project management
  • Hassle free hosting and deployments
  • Hassle free authentication

Hosting

To host my web projects, I just deploy them to heroku with a git push and voila, they take care of running my application and serving it online. No need to worry about managing a whole linux VM to host simple JavaScript applications.

Why is all my code JavaScript?

I just love being able to write the frontend and backend code in the same familiar language. JavaScript has grown tremendously in the past few years and has matured beautifully. I use React for the front end and Express as an API server that connects to a MongoDB database in Heroku's cloud. Even my data is practically JavaScript, since MongoDB stores everything in JSON documents. I used to program in .NET, C# using Visual Studio, but now I prefer keeping things more simple. I work on a Mac, and .NET development is not ideal.

What do I use for project management?

Github. I track issues and assign them to milestones. Github's project management tools are perfect for small projects. I can invite my clients as "collaborators" to my private repos, that way they can easily have an overview of the state of our project. They can participate by reporting bugs and feature requests directly into my repository. This gives me the ability to easily link each issue to a code change.

Building a UI prototype

First, I need to make sure me and my client are on the same page about what exactly needs to be built. I need to translate their ideas and needs into a more specific feature requirement list. When I'm sure we agree on what needs to be done, I initialize a React frontend project with create-react-app and build a simple UI prototype with dummy data, for example in JSON files. Each of my projects have two git remotes. Github, and Heroku. I deploy my prototype to Heroku with a git push and show it to my client.

The Server Side

When my client and I have discussed the prototype, I can start laying the groundwork for the magic that will happen behind the scenes. For my two most recent projects, I set up an Express.js server as a seperate application with it's own git repository. I like to keep the backend seperate from the frontend so that I can easily switch out my whole server side architecture later and replace it with something else. Say for example I, or whoever takes over my project later would like to move on to C# and MySQL or even serverless architecture without touching my frontend code, that can be done quite easily due to this seperation of concerns. My Express.js server is just a restful API server and it connects to a MongoDB database. When the front end application needs data, it just sends requests using Axios. My server side app is also deployed to a seperate Heroku instance whenever I push changes.

Using Foundation and SCSS with React

A lot of web devs say you shouldn't need SCSS or any other CSS framework when working with react and that using component styling is the way to go. Personally, I'm just used to using a CSS extension language. It gives me a bit more flexibility, although it complicates the code base and workflow slightly. The tradeoffs are worth it for me. SCSS can be used without "ejecting" a create-react-app. Just import the compiled minified stylesheet into your main component like so: import './styles/app.min.css'; and keep gulp running while styling. I installed foundation-sites with npm and included the foundation scss files in my gulpfile.js. Here's my whole gulp file in case you're interested, as you can see it's quite compact and simple.

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    cssnano = require('gulp-cssnano'),
    rename = require('gulp-rename');

var sassPaths = [
        'src/scss/**/*.scss',
        'node_modules/foundation-sites/scss'],

    sassWatch = [
        'src/scss/**/*.scss',
        'node_modules/foundation-sites/scss/**/*.scss'];

var css_destPath = 'src/styles';

gulp.task('sass', function () {
  return gulp.src('src/scss/app.scss')
      .pipe(sass({
        includePaths: sassPaths,
        errLogToConsole: true
      })
      .on('error', sass.logError))
      .pipe(autoprefixer({
        browsers: ['> 1%', 'last 2 versions', 'ie >= 9']
      }))
      .pipe(gulp.dest(css_destPath))
      .pipe(cssnano())
      .pipe(rename({ extname: '.min.css' }))
      .pipe(gulp.dest(css_destPath));
});

gulp.task('default', ['sass'], function () {
  gulp.watch(sassWatch, ['sass']);
});

Authentication

I use Auth0 for user management, at least during the early days of a project. I don't like to build my own authentication system and I like to outsource my main security risks and complexities so that I can focus on building the actual application. Users can log into my apps using various providers, such as Google, Facebook, Github and Twitter. They can also just register directly through Auth0 with an email and password. Auth0 uses Oauth2 for authentication. They provide a free tier with limited functionality, but it has been enough for me so far. Auth0 also gives you the ability to fine tune access to your application using an email address or domain whitelist along with a ton of other options. Their documentation is allright, it comes in the form of quick start guides for a number of programming languages and different development environments. Those are long guides that cover the implementation process from beginning to end. I would like to see a more traditional wiki with short articles for each feature as well, something more easily navigable. That's my only concern with Auth0 so far, the docs are weird and overly lengthy.

Here's the guide I followed loosely.

Conclusion

The main theme of this stack is to outsource complexities such as server management, authentication and security. The goal is to avoid reinventing the wheel at all costs. This gives me more freedom to build the fun stuff more quickly, features that my client can actually see!

Whats next?

I'd like to dive into Serverless architecture.