Skip to content

Instantly share code, notes, and snippets.

@gotofritz
Last active July 9, 2019 21:31
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save gotofritz/088d6bbf95bd95734acd8d830be76c37 to your computer and use it in GitHub Desktop.
Save gotofritz/088d6bbf95bd95734acd8d830be76c37 to your computer and use it in GitHub Desktop.
Creates a simple CRA project, removing some of the unnecessary files
# Creates a simple CRA project, removing some of the unnecessary files
# (Eventually I will build a proper tool to do this, but in the meantime...)
# ensure there is a project name to build
if [[ $1 == '' ]]; then
echo 'Usage: cra the_name_of_a_folder_you_want_created'
exit
fi
project_name=$1
# this is only needed from a bash script, as it wouldn't find the nvm command
# otherwise - because nvm is not a command, but a shell function
. ~/.nvm/nvm.sh
# Typically I build all my projects inside ~/work, where I have a .nvmrc
nvm use
# make sure the global version of CRA is up to date
npm -g update create-react-app
npx create-react-app $project_name
cp ~/work/.nvmrc $project_name
cd $project_name
# get rid of unnecessary files, and move others out of the way
rm src/logo.svg
mkdir src/assets
mv src/index.css src/assets/reset.css
mkdir src/App
mv src/App.* src/App
# remove references to those unnecessary files in App.js
sed -i.bak \
-e '/logo/d' \
-e '/.css/d' \
src/App/App.js
# fix references to moved files in index.js
sed -i.bak \
-e 's_./index_./assets/reset_' \
-e 's_./App_./App/App_' \
src/index.js
sed -i.bak \
-e '/logo/d' \
src/App/App.js
# get rid of the backups OS X forces on us
find src/ -name "*.bak" -delete
# add a simple reset from vladocar
export URL=https://raw.githubusercontent.com/vladocar/CSS-Micro-Reset/master/micro-css-reset.css
echo -e "\n\n/* $URL */\n" >> src/assets/reset.css
curl $URL >> src/assets/reset.css
# set up linting
yarn install -DE prettier eslint-plugin-prettier
cat << EOF > .eslintrc
{
"extends": "react-app",
"plugins": ["prettier"],
"rules": {
"prettier/prettier": "error"
}
}
EOF
cat << EOF > .prettierrc
{
"singleQuote": true,
"trailingComma": "all",
"endOfLine": "lf"
}
EOF
# allow us to use imports relatives to src
cat << EOF > jsconfig.json
{
"compilerOptions": {
"baseUrl": "src"
}
}
EOF
# VSCode debugging
mkdir -p .vscode
cat << EOF > .vscode/launch.json
{
"version": "0.2.0",
"configurations": [{
"name": "Chrome",
"type": "chrome",
"request": "launch",
"url": "http://localhost:3000",
"webRoot": "${workspaceRoot}/src",
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
}]
}
EOF
# add some useful .gitignore files for my environment
curl "https://www.gitignore.io/api/osx,visualstudiocode" >> .gitignore
# hopefully it all still works...
npm start
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment