CRATE - Create React App with Typescript and Electron

Table of Contents

1. About CRATE
2. Find and Replace
3. Develop
4. Build Prerequisites
5. Build for an OS
6. Build for all OSes

About CRATE

"CRATE is based on a simple idea: You shouldn't have to build a box to put your code into a box. I looked for a boilerplate that did what I wanted for what felt like aeons (but it was actually only a few weeks), and eventually gave up and made one in the name of being more lazy later.

CRATE supports all the features I wanted (you might call it extremely opinionated, verging on bitchy) in a development environment and buildchain. My boilerplate had to be open source from top to bottom, support cross-platform building of distributable applications, allow hot-reloading in the Electron app during development, be written in as close to pure Typescript as was practical (there is literally one line of vanilla JavaScript in preload.js, and I will get rid of it soon), include all the conveinece management functions as npm scripts that I would ever use regularly, and require the minimum number of keystrokes while still outputting easily readable useful information at the terminal, tell me when it was done building so I could walk away from the build command, have a development environment as similar as possible to the output app experience, have a universal user experience across all 3 desktop OSes, gitignore all the stuff I didn't want to track or think about that was specific to that application, work on all 3 desktop OSes, use bleeding-edge versions of my dependencies, auto-update the application, use the bare minimum number of dependencies, contain the minimum number of files, and just generally be complete enough that all I had to do was clone the repo and start adding my code.

Alright, I realize now looking at my list of requirements that CRATE is both highly opinionated and bitchy (but I'm okay with that, because it does all of those things). CRATE is the best way to build applications I've ever had the pleasure of working with, and I hope you find it useful in your projects." - VirtualEstatePlanner

TOC

Find and replace these values in the entire project

To start your project, you should find and replace the following symbols project-wide in VS Code by hitting crtl-shift-f (or command-shift-f on macOS):

1. YOUR_GITHUB_USER => your github username
2. YOUR_GITHUB_REPO => your application's github repository name
3. your-package-name => your application's npm package name
4. YOUR_APP_SHORT_NAME => your application's shortened name
5. YOUR_PRODUCT_NAME => your application's human-readable product name
6. YOUR_APPLICATION_DESCRIPTON => your application's human-readable short description
7. YOUR_NAME => your human name
8. YOUR_EMAIL_ADDRESS => your email address

TOC

How to run in development mode

Then if you don't just want to stare at a spinning box icon on all 3 platforms you should probably develop your project:

1. Run npm i -g yarn to install yarn globally
2. Install the Debugger for Chrome extension in VSCode.
3. Run yarn to install dependencies and configure the environment
4. Run yarn develop to start
5. (Optional, but highly recommended) Click and then click this green triangle:
6. (Optional, but officially recommended by people who aren't me becuase I like to live dangerously and I am a rolling distro kind of guy) Replace all instances of latest with actual version numbers in all 3 package.json files, unless you like to live dangerously (or are a rolling-distro kind of guy, gal, or android death machine)

TOC

Prerequisites to build some distributable installers

If you are developing on macOS and building executables for Windows (ugh, I know, but you should), install Docker for Mac.

If you are developing on linux and building executables for Windows (ugh, I know, but you still probably should), run curl -fsSL https://get.docker.com -o get-docker.sh && sudo sh get-docker.sh to install docker-ce on most distros.

If you are developing for deployment on the Mac App Store (because you don't want to be open source about life), find the field in package.json located at "build": { "mac": { "identity": }} on line 83 and replace the null value with your Apple Developer ID.

TOC

How to build distributable installers for specific platforms

Run yarn dist:linux, yarn dist:linux-intel64, or dist:linux-arm64 to make executables for linux in the binaries directory (works on any platform)

Run yarn dist:mac, yarn dist:mac-intel64, or yarn dist:mac-arm64 to make executables for mac in the binaries directory (only works on macOS)

Run yarn dist:win, yarn dist:win-intel64, or yarn dist:win-arm64 to make executables for windows in the binaries directory (only works on windows)

Run yarn dist:win-docker, yarn dist:win-docker-intel64, or yarn dist:win-docker-arm64, to make executable fors windows in the binaries directory (works on macOS or linux)

TOC

How to build distributable installers for all platforms

(only works on macOS)

1. Own an intel macOS computer (or maybe a Hackintosh)
2. Be very lazy
3. Make sure your docker daemon is running
4. Run yarn dist:all-working to make executables for all platforms and architectures in the binaries directory
5. Your mac will tell you when it's done

TOC