Last active
November 9, 2019 00:33
-
-
Save bloadvenro/15c0e6ba89ada549f07d311ebea3c9bf to your computer and use it in GitHub Desktop.
Easily create Parcel boilerplates (vanillaJS, TS, React, React+TS)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #!/bin/bash | |
| script_dir=$(pwd) | |
| project_home=$1 | |
| isEmpty() { [ -z $1 ] ; } | |
| isCliFlag() { [[ $1 == --* ]] ; } | |
| if isEmpty $project_home || isCliFlag $project_home | |
| then | |
| echo 'Project home must be set!' | |
| exit 1 | |
| fi | |
| shift | |
| while [[ "$#" -gt 0 ]]; do case $1 in | |
| --typescript) typescript=1;; | |
| --react) react=1;; | |
| *) echo "Unknown parameter passed: $1"; exit 1;; | |
| esac; shift; done | |
| shouldInstallReact() { [ -v react ] ; } | |
| shouldInstallTypescript() { [ -v typescript ] ; } | |
| get_entry_script_extention() { | |
| shouldInstallReact && shouldInstallTypescript && echo tsx && return | |
| shouldInstallTypescript && echo ts || echo js | |
| } | |
| echo =========================================================================== | |
| echo CREATE BASIC FILE STRUCTURE | |
| echo =========================================================================== | |
| echo "create project in $project_home" | |
| mkdir -p $project_home && cd $project_home | |
| mkdir src | |
| echo 'create package.json' | |
| cat <<END >> package.json | |
| { | |
| "name": "boilerplate", | |
| "version": "0.0.0", | |
| "author": "", | |
| "description": "", | |
| "scripts": { | |
| "start": "parcel index.html --open" | |
| }, | |
| "license": "UNLICENSED", | |
| "private": true | |
| } | |
| END | |
| echo 'create index.html' | |
| cat <<END >> index.html | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>Document</title> | |
| </head> | |
| <body> | |
| <div id="root"></div> | |
| <script src="src/index.$(get_entry_script_extention)"></script> | |
| </body> | |
| </html> | |
| END | |
| echo 'create prettier.config.js' | |
| cat <<END >> prettier.config.js | |
| module.exports = { | |
| semi: true, | |
| singleQuote: true, | |
| tabWidth: 2, | |
| trailingComma: 'all', | |
| }; | |
| END | |
| entry_script_file=src/index.$(get_entry_script_extention) | |
| echo "create $entry_script_file" | |
| shouldInstallReact && | |
| cat <<END >> $entry_script_file | |
| import * as React from 'react'; | |
| import { render } from 'react-dom'; | |
| END | |
| cat <<END >> $entry_script_file | |
| const root = document.getElementById('root'); | |
| const libs = []; | |
| END | |
| shouldInstallReact && | |
| cat <<END >> $entry_script_file | |
| libs.push('react'); | |
| END | |
| shouldInstallTypescript && | |
| cat <<END >> $entry_script_file | |
| libs.push('typescript'); | |
| END | |
| cat <<END >> $entry_script_file | |
| const libsStr = libs.join('/'); | |
| END | |
| if shouldInstallReact | |
| then | |
| cat <<END >> $entry_script_file | |
| const Component = () => <div>Welcome to the parcel {libsStr} boilerplate!</div>; | |
| render(<Component />, root); | |
| END | |
| else | |
| cat <<END >> $entry_script_file | |
| root.innerText = 'Welcome to the parcel ' + libsStr + ' boilerplate!'; | |
| END | |
| fi | |
| echo =========================================================================== | |
| echo INSTALL DEPENDENCIES | |
| echo =========================================================================== | |
| yarn add --silent -D \ | |
| parcel-bundler \ | |
| prettier | |
| shouldInstallTypescript && | |
| yarn add --silent -D \ | |
| typescript | |
| shouldInstallReact && | |
| yarn add --silent \ | |
| react \ | |
| react-dom | |
| shouldInstallReact && shouldInstallTypescript && | |
| yarn add --silent -D \ | |
| @types/react \ | |
| @types/react-dom | |
| yarn start | |
| # LINKS: | |
| # - parse CLI args: https://stackoverflow.com/a/33826763 | |
| # - example of file content generation with interpolation: http://linuxcommand.org/lc3_wss0120.php | |
| # - functional predicates: https://stackoverflow.com/a/24896617 | |
| # - bash functions man: https://linuxize.com/post/bash-functions/ | |
| # - the difference between [] and [[]]: https://serverfault.com/questions/52034/what-is-the-difference-between-double-and-single-square-brackets-in-bash | |
| # - bach "unary operator expected" condition error: https://stackoverflow.com/a/42637311 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Usage
Create (or download) this script on your local machine and make executable by issuing
chmod +x create-parcel-boilerplateNo additional steps required, you just need
yarnto be installed.To create boilerplates:
$ ./create-parcel-boilerplate ~/Projects/vanilla-project[hit Enter]$ ./create-parcel-boilerplate ~/Projects/typescript-project --typescript[hit Enter]$ ./create-parcel-boilerplate ~/Projects/react-project --react[hit Enter]$ ./create-parcel-boilerplate ~/Projects/react-typescript-project --react --typescript[hit Enter]Browser will be opened automatically.
Tip: move this script to the folder listed among $PATH directories (e.g. to the
$HOME/.local/bin) and invoke it as a global command.