A few options to quickly boilerplate a new front end JavaScript project

Back to all posts
Articles
16th May 2020

This is just a quick note, as much for my own future reference as anything else because I have a brain like a sieve when it comes to these kinds of things you only do once in a while – but if you’re reading this and have any other suggestions for me, I’m all ears.

The reason I’m only focusing on front end is due to the sheer amount of bland configuration that’s required to get anything off the ground – setting up something like a Node/Express environment is comparatively pretty simple!

Simple React Project

Good old Create React App is still my preferred option here – it’s widely supported, constantly kept up to date and has great documentation. A variety of flags can be passed in when creating a new app based on your preferences, for example to create an app with Typescript support built in, use:

npx create-react-app my-app --template typescript

React + Redux Project

The last time I worked with Redux in any meaningful way, I don’t think this existed (or if did I didn’t notice) so I was thrilled to find this CRA template the other day (which is currently listed in the Redux getting started guide):

npx create-react-app my-app --template redux

This template includes React, Redux, React-Redux and Redux Toolkit.

Vanilla JS Project (including module imports, bundling, babel transpiling etc)

There’s nothing more tedious than setting up a new Webpack config from scratch but, as someone who likes to at least mostly understand what’s going on inside his projects, I also don’t like using a huge, monolithic pre-written config file with a million and one dependencies from the get-go.

Therefore I was pleased to come across https://createapp.dev. This little tool gives you a neat UI to quickly pull together a full project boilerplate (not just a config file) containing whatever basic build tools and dependencies you need to get going. Download the zip, run npm install and you’re good to go.

The only problem I ran into, and I don’t know if this is something specific to my setup, is that even with a Vanilla JS project I was running into a React missing dependency error due to the hot-loader package being used. A quick npm install of React as a dev dependency in the project sorted this out though.

Comment on this post

I love to talk web. If you have any civil thoughts, corrections or comments on this post, feel free to tweet or DM @fraserboag or, if you prefer, email fraser.boag@gmail.com.

Tweet

Keep up to date

From time to time I post things which people seem to find fairly interesting, stick your email address in the box below and I'll make sure you hear about it!