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 typescriptReact + 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 reduxThis 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 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.