Last active
October 30, 2016 17:36
-
-
Save mtancoigne/aff190663d5b3ae8a8b7f394bcc1dee9 to your computer and use it in GitHub Desktop.
Sets up a basic React project
This file contains 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 - | |
| #title :create_react.sh | |
| #description :Small script to get started with React+webpack+babel. | |
| # Inspired by this tutorial: https://www.codementor.io/reactjs/tutorial/beginner-guide-setup-reactjs-environment-npm-babel-6-webpack | |
| #author :Manuel Tancoigne | |
| #date :20161030 | |
| #version :1.0 | |
| #usage :./create_react.sh [<project_name>] | |
| #notes : | |
| #bash_version :4.3.42(1)-release | |
| #============================================================================ | |
| # Asks a question to the user | |
| # Takes two parameters : | |
| # - The question | |
| # - The default answer (y/n) | |
| # Returns the answer | |
| function ask_for { | |
| read -p "$1 [Y/n]" ANSWER; | |
| while [[ ! "$ANSWER" =~ ^(y|Y|n|N|)$ ]]; do | |
| read -p " > Please, choose 'y' or 'n' or nothing to use defaults." ANSWER; | |
| done; | |
| case $ANSWER in | |
| [yY]) ANSWER='y';; | |
| [nN]) ANSWER='n';; | |
| '') ANSWER=$2;; | |
| esac; | |
| echo "$ANSWER"; | |
| } | |
| # ----------------------------------------------------------------------------- | |
| # | |
| # Creating directories | |
| # | |
| # ----------------------------------------------------------------------------- | |
| # Get the absolute path to current dir: | |
| pushd `dirname .` > /dev/null; | |
| BASE_DIR=`pwd`; | |
| popd > /dev/null; | |
| # Check for params | |
| if [ '' != "$1" ]; then | |
| PROJECT_NAME="$1"; | |
| else | |
| # Ask for project name | |
| echo "What is the project name ?" | |
| read -p "> " PROJECT_NAME; | |
| fi; | |
| mkdir "$PROJECT_NAME"; | |
| cd "$PROJECT_NAME"; | |
| mkdir -p "src/client/public"; | |
| mkdir -p "src/client/app"; | |
| # ----------------------------------------------------------------------------- | |
| # | |
| # Creating files | |
| # | |
| # ----------------------------------------------------------------------------- | |
| # NPM configuration file | |
| echo "{ | |
| \"name\": \"$PROJECT_NAME\", | |
| \"version\": \"1.0.0\", | |
| \"description\": \"\", | |
| \"main\": \"index.js\", | |
| \"scripts\": { | |
| \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\", | |
| \"dev\": \"webpack -d --watch\", | |
| \"build\" : \"webpack -p\" | |
| }, | |
| \"author\": \"\", | |
| \"license\": \"ISC\", | |
| \"dependencies\": { | |
| \"babel-loader\": \"^6.2.7\", | |
| \"babel-preset-es2015\": \"^6.18.0\", | |
| \"babel-preset-react\": \"^6.16.0\", | |
| \"webpack\": \"^1.13.3\" | |
| } | |
| }" > "package.json"; | |
| # Webpack config | |
| echo "var webpack = require('webpack'); | |
| var path = require('path'); | |
| var BUILD_DIR = path.resolve(__dirname, 'src/client/public'); | |
| var APP_DIR = path.resolve(__dirname, 'src/client/app'); | |
| var config = { | |
| entry: APP_DIR + '/index.jsx', | |
| output: { | |
| path: BUILD_DIR, | |
| filename: 'bundle.js' | |
| }, | |
| module : { | |
| loaders : [ | |
| { | |
| test : /\\.jsx?/, | |
| include : APP_DIR, | |
| loader : 'babel' | |
| } | |
| ] | |
| } | |
| }; | |
| module.exports = config; | |
| " > "webpack.config.js"; | |
| # Babel config | |
| echo "{ | |
| \"presets\" : [\"es2015\", \"react\"] | |
| } | |
| " > ".babelrc" | |
| # ----------------------------------------------------------------------------- | |
| # | |
| # Installing dependencies | |
| # | |
| # ----------------------------------------------------------------------------- | |
| echo -e "\nInstalling dependencies..."; | |
| npm i webpack babel-loader babel-preset-es2015 babel-preset-react babel-core react react-dom -S | |
| # Dummy component | |
| echo "import React from 'react'; | |
| class HomeComponent extends React.Component { | |
| constructor(props) { | |
| super(props); | |
| this.state = {message : 'React is ready'}; | |
| } | |
| render() { | |
| return ( | |
| <div style={{color: '#0F0'}}> | |
| {this.state.message} | |
| </div> | |
| ); | |
| } | |
| } | |
| export default HomeComponent; | |
| " > "src/client/app/HomeComponent.jsx"; | |
| # Entry point | |
| echo "// React base | |
| import React from 'react'; | |
| import {render} from 'react-dom'; | |
| // Other imports | |
| import HomeComponent from './HomeComponent.jsx'; | |
| class App extends React.Component { | |
| render () { | |
| return ( | |
| <HomeComponent /> | |
| ); | |
| } | |
| } | |
| render(<App/>, document.getElementById('app')); | |
| " > "src/client/app/index.jsx" | |
| # Sample HTML | |
| echo "<!DOCTYPE html> | |
| <html lang=\"en\"> | |
| <head> | |
| <meta charset=\"utf-8\"> | |
| <title>React.js using NPM, Babel6 and Webpack</title> | |
| </head> | |
| <body> | |
| <div id=\"app\" /> | |
| <script src=\"public/bundle.js\" type=\"text/javascript\"></script> | |
| </body> | |
| </html> | |
| " > "src/client/index.html"; | |
| echo "# $PROJECT_NAME" > 'README.md' | |
| # ----------------------------------------------------------------------------- | |
| # | |
| # Initialize GIT | |
| # | |
| # ----------------------------------------------------------------------------- | |
| INIT_GIT=$(ask_for "Do you want to initialize a git repo ?" "y"); | |
| if [ 'y' == "$INIT_GIT" ]; then | |
| echo "# Node modules | |
| node_modules/ | |
| " > ".gitignore"; | |
| IGNORE=$(ask_for "Do you want to include the compiled files in your repo ?" "y"); | |
| if [ 'n' == "$COMMIT" ]; then | |
| echo "# Compiled file | |
| src/client/public/ | |
| " >> ".gitignore"; | |
| fi; | |
| git init; | |
| COMMIT=$(ask_for "Git is initilized. Do you want to make your first commit ?" "y"); | |
| if [ 'y' == "$COMMIT" ]; then | |
| git add .; | |
| git commit -m "Initial commit"; | |
| fi; | |
| fi; | |
| # ----------------------------------------------------------------------------- | |
| # | |
| # Launch `npm run dev` | |
| # | |
| # ----------------------------------------------------------------------------- | |
| RUN_DEV=$(ask_for "Do you want to run 'npm run dev' and start coding ?" "y"); | |
| if [ 'y' == "$RUN_DEV" ]; then | |
| npm run dev; | |
| fi; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Prerequisites: Node + npm installed
Optionnal : git (configured)
Usage :
./create_react.sh [<project_name>]