create-web-app

#!/usr/bin/env python3
import argparse
import os

def getPath(dest):
    return os.path.abspath(dest)

def create_dir(path, verbose):
    os.makedirs(path)
    if verbose > 0:
        print('Created directory {}'.format(path))

def writeFile(path, content, verbose):
    # todo: write file
    with open(path, 'w') as ofs:
        ofs.write(content)
    if verbose > 0:
        print('Created file {}'.format(path))

def createFileTree(name, path, verbose):
    # create_dir(path + '/src', verbose)
    # create_dir(path + '/src/api', verbose)
    # create_dir(path + '/src/js', verbose)
    # create_dir(path + '/src/static', verbose)
    # create_dir(path + '/src/static/css', verbose)
    # create_dir(path + '/src/static/images', verbose)
    # create_dir(path + '/src/static/js', verbose)
    # create_dir(path + '/src/templates', verbose)
    # create_dir(path + '/src/util', verbose)
    # create_dir(path + '/src/views', verbose)

    for p, content in allFiles.items():
        filePath = path + p
        filePathDir = filePath[:filePath.rfind('/')]
        if not os.path.exists(filePathDir):
            create_dir(filePathDir, verbose)
        writeFile(filePath, content.replace('{{name}}', name), verbose)

def create(name, destination, verbose):
    print('Creating React web app', name, 'at', destination)
    path = getPath(destination)
    fullpath = path + '/' + name
    if not os.path.exists(path):
        try:
            create_dir(path, verbose)
        except PermissionError:
            print('Permission denied.')
            exit(1)
    else:
        if os.path.exists(fullpath):
            print('Project at {} already exists.'.format(fullpath))
            exit(1)

    create_dir(fullpath, verbose)
    createFileTree(name, fullpath, verbose)
    print('Done.')
    


def main():
    parser = argparse.ArgumentParser(description='Create a Web App!')
    parser.add_argument('name', help='Name of the to-be-created app')
    parser.add_argument('destination', default='.', help='Destination to create app')
    parser.add_argument('--verbose', '-v', action='count', default=0, help='Show verbose output')
    params = parser.parse_args()
    create(params.name, params.destination, params.verbose)

#
#
# Files
#
#

allFiles = {

# .gitignore
'/.gitignore' : '''*.DS_Store
*.pyc
*.swp
*__pycache__*
*egg-info*
Session.vim
cookies.txt
env/*
node_modules
session.json
tmp
var
*.log
starter_files*
sftp-config.json
package-lock.json
*_compiled.js
''',

# requirements.txt
'/requirements.txt' : '''Flask==1.1.1
Flask-Testing==0.7.1
nodeenv==1.3.3
sh==1.12.14
''',

# main.py
'/main.py' : '''from src import app

if __name__ == "__main__":
    app.run(host="0.0.0.0", port=8000)
''',

# config.py
'/config.py' : '''APPLICATION_ROOT = '/'

DEBUG = False
''',

# package.json
'/package.json' : '''{
  "name": "{{name}}",
  "version": "1.0.0",
  "description": "",
  "main": "",
  "dependencies": {
    "@babel/core": "^7.13.10",
    "@babel/preset-env": "^7.13.12",
    "@babel/preset-react": "^7.12.13",
    "bootstrap": "^4.6.0",
    "prop-types": "^15.7.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-localizer": "^2.1.3"
  },
  "devDependencies": {
    "babel-core": "^7.0.0-0",
    "babel-loader": "==7.1.2",
    "babel-preset-env": "==1.7.0",
    "babel-preset-react": "==6.24.1",
    "webpack": "==4.30.0",
    "webpack-cli": "==3.3.0"
  },
  "scripts": {
    "test": "echo \\"Error: no test specified\\" && exit 1",
    "dev": "webpack --mode development --display-error-details --watch",
    "build": "webpack --mode production"
  },
  "keywords": []
}

''',

# webpack
'/webpack.config.js' : '''const path = require('path');

module.exports = {
  entry: {
    index: './src/js/index.jsx'
  },
  output: {
    path: path.join(__dirname, '/src/static/js/'),
    filename: '[name]_compiled.js',
  },
  module: {
    rules: [
      {
        // Test for js or jsx files
        test: /\\.jsx?$/,
        loader: 'babel-loader',
        query: {
          // Convert ES6 syntax to ES5 for browser compatibility
          presets: ["@babel/preset-react", '@babel/preset-env'],
          compact: false,
        },
      },
      {
        test: /\\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
};
''',

# runServer
'/runServer' : '''source env/bin/activate

if [ $1 = "build" ]; then
    echo "Building javascript..."
    npm run build
fi

export LC_ALL=C.UTF-8
export LANG=C.UTF-8
export FLASK_DEBUG=True
export FLASK_APP=src
export APP_SETTINGS=config.py
flask run --host 0.0.0.0 --port 8000
''', 

# setup.sh
'/setup.sh' : '''echo "Setting up {{name}} project"

echo "Adding runServer script permissions..."
chmod +x runServer 
echo "Done"

echo "Setting up Python virtual environment..."
python3 -m venv env
echo "Done"
echo "Entering virtual environment..."
source env/bin/activate
echo "Installing Python dependencies..."
pip3 install -r requirements.txt
echo "Done"
echo "Installing Javascript dependencies..."
npm install . --legacy-peer-deps
echo "Done"

echo "Finished setup"
''',

# README
'/README.md' : '''# {{name}}

## Getting started

Run the setup script. This script assumes that you have the following already installed: 
- Python 3
    - pip
- npm

```sh
sudo sh setup.sh
```

The script will set up a virtual environment for the backend, as well as install all JS/Python dependencies. 

## Running the server

```sh
./runServer build
```

Then visit the webpage from your browser at url [0.0.0.0:8000](0.0.0.0:8000)!

*Alternativtely*, if you don't want to rebuild the javascript and restart the server everytime you make a JS change, you can split it into two terminal commands: 

```sh
npm run dev
```
This will cause the JS compiler to watch for changes indefinitely and update as you save your files (until you Ctrl-C). Then, on a fresh terminal, run the server without the build command: 
```sh
./runServer
```
''',

# src/init
'/src/__init__.py' : '''import flask

app = flask.Flask(__name__)
app.config.from_object('config')

app.config.from_envvar('APP_SETTINGS', silent=True)

# import pyrebase
# firebase = pyrebase.initialize_app({
#    TODO: uncomment if using firebase
# })

# db = firebase.database()

import src.views
import src.api
''',

# src/api/init
'/src/api/__init__.py' : '''from src.api.api import *
''',

# src/api/api.py
'/src/api/api.py' : '''from src import app
from src.util import *
import flask

@app.route("/api/", methods=['GET'])
def get_id():
    new_hash = gen_hash(recipe_id_length_c)
    return flask.jsonify({'id': new_hash})
''',

# src/js/index.jsx
'/src/js/index.jsx' : '''import React from 'react';
import ReactDOM from 'react-dom';

function Index(props) {
    return (
        <div>Hello! Welcome to {{name}} :)</div>
    );
}

ReactDOM.render(
  <Index url="/api/" />,
  document.getElementById('reactEntryPoint'),
);
''',


# src/static/css/style.css
'/src/static/css/style.css' : '''.title {
}

.data {
    display:none;
}
''',

# src/templates/base.html
'/src/templates/base.html' : '''{% from "macros.html" import declare %}

<!DOCTYPE html>
<html lang="en">
    <head>
        <title class="title">{% block title %}{{ title }}{% endblock %}</title>
        <div class="data">{% block data %}{% endblock %}</div>
        <link rel="stylesheet" href="{{url_for('static', filename='css/style.css')}}">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    </head>
    <body>
        {% block database %}{% endblock %}
        {% block content %}{% endblock %}
        {% block entry %}<div id="reactEntryPoint"></div>{% endblock %}
        <script 
            type="text/javascript"
            src="{% block script %}{{ url_for('static', filename='js/') }}{{ jsfile }}_compiled.js{% endblock %}">
        </script>
        <div class="footer"></div>
    </body>
</html>

''',

# src/templates/macros.html
'/src/templates/macros.html' : '''{% macro declare(var, name) -%}
    <div id={{var}} class="data">{{ name }}</div>
{%- endmacro %}
''',

# src/util/init
'/src/util/__init__.py' : '''from src.util.util import *
from src.util.consts import *
''',

# src/util/util.py
'/src/util/util.py' : '''import string
import random

# Source: https://stackoverflow.com/questions/13484726/safe-enough-8-character-short-unique-random-string
def gen_hash(length): 
    alphabet = string.ascii_lowercase + string.digits
    return ''.join(random.choices(alphabet, k=length))
''',

# src/util/consts.py
'/src/util/consts.py' : '''main_jsfile_c = 'index'
''',

# src/views/init
'/src/views/__init__.py' : '''from src.views.main import *
''',

# src/views/main.py
'/src/views/main.py' : '''from src import app
from src.util import *
import flask

@app.route("/")
def home_page():
    context = {
        'jsfile': main_jsfile_c,
        'title': '{{name}}'
    }
    return flask.render_template("base.html", **context)
''',

}


if __name__ == '__main__':
    main()