welmends/mkproj.sh

## mkproj.sh
#!/bin/bash
# Script used to create django project integrated with javascript/react frontend
# Execute these command to run:
# $ sh mkproj.sh
# $ python manage.py runserver
# $ yarn run dev


# set project name and frontend package name
PROJ_NAME='app'
PKG_NAME='frontend'

# create django project
django-admin startproject $PROJ_NAME

# change to the default package directory
cd $PROJ_NAME

# create module to frontend
django-admin startapp $PKG_NAME

# add created app to the INSTALLED_APPS on settings.py
FILEPATH=''$PROJ_NAME'/settings.py'
python - << EOF
pkg = "$PKG_NAME"
value = "    '{}.apps.{}Config',\n".format(pkg, pkg.capitalize())

with open("$FILEPATH", "r") as f:
    contents = f.readlines()
contents.insert(39, value)
with open("$FILEPATH", "w") as f:
    contents = "".join(contents)
    f.write(contents)
EOF

# add created path on the urls.py
rm -rf $PROJ_NAME/urls.py
touch $PROJ_NAME/urls.py
echo '''"""app URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/4.1/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  path('\'''\'', views.home, name='\''home'\'')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  path('\'''\'', Home.as_view(), name='\''home'\'')
Including another URLconf
    1. Import the include() function: from django.urls import include, path
    2. Add a URL to urlpatterns:  path('\''blog/'\'', include('\''blog.urls'\''))
"""
from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('\''admin/'\'', admin.site.urls),
    path('\'''\'', include('\''frontend.urls'\'')),
]''' >> $PROJ_NAME/urls.py

# create urls.py and define urlpatterns on it
cd $PKG_NAME
touch urls.py
echo '''from django.urls import path
from .views import indexView

urlpatterns = [
    path("", indexView),
]''' >> urls.py

# define method on views.py
echo '''def indexView(request, *args, **kwargs):
    return render(request, "'$PKG_NAME'/index.html")''' >> views.py

# create templates and setup generic index.html
mkdir -p templates/$PKG_NAME
touch templates/$PKG_NAME/index.html
echo '''{% load static %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Django + React Default Project</title>
    <link rel="stylesheet" href="{% static '\''css/style.css'\'' %}" />
  </head>
  <body>
    <div id="main">
      <div id="app"></div>
    </div>
    <script src="{% static '\'''$PKG_NAME/main.js''\'' %}"></script>
  </body>
</html>''' >> templates/$PKG_NAME/index.html

# create static structure
mkdir -p static/$PKG_NAME
mkdir -p static/css
mkdir -p static/images

# create javascript source structure and fill it
mkdir -p src/components
touch src/index.js
echo '''import { App } from "./components/App";''' >> src/index.js

touch src/components/App.js
echo '''import React, { Component } from "react";
import { render } from "react-dom";

export default class App extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return ( <div >
            <h1> This is the App.js </h1>
            </div>
        );
    }
}

const appDiv = document.getElementById("app");
render( <App/> , appDiv);''' >> src/components/App.js

# install webpack, babel and react dependecies with yarn
yarn init -y
yarn add webpack webpack-cli --dev
yarn add @babel/core @babel/preset-react @babel/preset-env --dev
yarn add babel-loader css-loader style-loader --dev
yarn add react react-dom --dev
yarn add react-router-dom @babel/plugin-proposal-class-properties

# setup config for webpack
touch webpack.config.js
echo '''const path = require("path");
const webpack = require("webpack");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "./static/'$PKG_NAME'"),
    filename: "[name].js",
  },
  module: {
    rules: [
      {
        test: /\.js|.jsx$/,
        exclude: /node_modules/,
        use: "babel-loader",
      },
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  optimization: {
    minimize: true,
  },
  plugins: [
    new webpack.DefinePlugin({
      "process.env": {
        NODE_ENV: JSON.stringify("development"),
      },
    }),
  ],
};''' >> webpack.config.js

# setup config for babel
touch babel.config.json
echo '''{
  "presets": [["@babel/preset-react", { "targets": "defaults" }]],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}''' >> babel.config.json

# update package.json with some scripts
FILEPATH='package.json'
python - << EOF
value = '''\t"scripts": {
\t\t"dev": "webpack --mode development --watch",
\t\t"build": "webpack --mode production"
\t},\n'''

with open("$FILEPATH", "r") as f:
    contents = f.readlines()
contents.insert(1, value)
with open("$FILEPATH", "w") as f:
    contents = "".join(contents)
    f.write(contents)
EOF

# finish with django migration
cd ..
python manage.py migrate
	#!/bin/bash
	# Script used to create django project integrated with javascript/react frontend
	# Execute these command to run:
	# $ sh mkproj.sh
	# $ python manage.py runserver
	# $ yarn run dev


	# set project name and frontend package name
	PROJ_NAME='app'
	PKG_NAME='frontend'

	# create django project
	django-admin startproject $PROJ_NAME

	# change to the default package directory
	cd $PROJ_NAME

	# create module to frontend
	django-admin startapp $PKG_NAME

	# add created app to the INSTALLED_APPS on settings.py
	FILEPATH=''$PROJ_NAME'/settings.py'
	python - << EOF
	pkg = "$PKG_NAME"
	value = " '{}.apps.{}Config',\n".format(pkg, pkg.capitalize())

	with open("$FILEPATH", "r") as f:
	contents = f.readlines()
	contents.insert(39, value)
	with open("$FILEPATH", "w") as f:
	contents = "".join(contents)
	f.write(contents)
	EOF

	# add created path on the urls.py
	rm -rf $PROJ_NAME/urls.py
	touch $PROJ_NAME/urls.py
	echo '''"""app URL Configuration

	The `urlpatterns` list routes URLs to views. For more information please see:
	https://docs.djangoproject.com/en/4.1/topics/http/urls/
	Examples:
	Function views
	1. Add an import: from my_app import views
	2. Add a URL to urlpatterns: path('\'''\'', views.home, name='\''home'\'')
	Class-based views
	1. Add an import: from other_app.views import Home
	2. Add a URL to urlpatterns: path('\'''\'', Home.as_view(), name='\''home'\'')
	Including another URLconf
	1. Import the include() function: from django.urls import include, path
	2. Add a URL to urlpatterns: path('\''blog/'\'', include('\''blog.urls'\''))
	"""
	from django.contrib import admin
	from django.urls import path, include

	urlpatterns = [
	path('\''admin/'\'', admin.site.urls),
	path('\'''\'', include('\''frontend.urls'\'')),
	]''' >> $PROJ_NAME/urls.py

	# create urls.py and define urlpatterns on it
	cd $PKG_NAME
	touch urls.py
	echo '''from django.urls import path
	from .views import indexView

	urlpatterns = [
	path("", indexView),
	]''' >> urls.py

	# define method on views.py
	echo '''def indexView(request, args, *kwargs):
	return render(request, "'$PKG_NAME'/index.html")''' >> views.py

	# create templates and setup generic index.html
	mkdir -p templates/$PKG_NAME
	touch templates/$PKG_NAME/index.html
	echo '''{% load static %}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Django + React Default Project</title>
	<link rel="stylesheet" href="{% static '\''css/style.css'\'' %}" />
	</head>
	<body>
	<div id="main">
	<div id="app"></div>
	</div>
	<script src="{% static '\'''$PKG_NAME/main.js''\'' %}"></script>
	</body>
	</html>''' >> templates/$PKG_NAME/index.html

	# create static structure
	mkdir -p static/$PKG_NAME
	mkdir -p static/css
	mkdir -p static/images

	# create javascript source structure and fill it
	mkdir -p src/components
	touch src/index.js
	echo '''import { App } from "./components/App";''' >> src/index.js

	touch src/components/App.js
	echo '''import React, { Component } from "react";
	import { render } from "react-dom";

	export default class App extends Component {
	constructor(props) {
	super(props);
	}

	render() {
	return ( <div >
	<h1> This is the App.js </h1>
	</div>
	);
	}
	}

	const appDiv = document.getElementById("app");
	render( <App/> , appDiv);''' >> src/components/App.js

	# install webpack, babel and react dependecies with yarn
	yarn init -y
	yarn add webpack webpack-cli --dev
	yarn add @babel/core @babel/preset-react @babel/preset-env --dev
	yarn add babel-loader css-loader style-loader --dev
	yarn add react react-dom --dev
	yarn add react-router-dom @babel/plugin-proposal-class-properties

	# setup config for webpack
	touch webpack.config.js
	echo '''const path = require("path");
	const webpack = require("webpack");

	module.exports = {
	entry: "./src/index.js",
	output: {
	path: path.resolve(__dirname, "./static/'$PKG_NAME'"),
	filename: "[name].js",
	},
	module: {
	rules: [
	{
	test: /\.js\|.jsx$/,
	exclude: /node_modules/,
	use: "babel-loader",
	},
	{
	test: /\.css$/,
	exclude: /node_modules/,
	use: ["style-loader", "css-loader"],
	},
	],
	},
	optimization: {
	minimize: true,
	},
	plugins: [
	new webpack.DefinePlugin({
	"process.env": {
	NODE_ENV: JSON.stringify("development"),
	},
	}),
	],
	};''' >> webpack.config.js

	# setup config for babel
	touch babel.config.json
	echo '''{
	"presets": [["@babel/preset-react", { "targets": "defaults" }]],
	"plugins": ["@babel/plugin-proposal-class-properties"]
	}''' >> babel.config.json

	# update package.json with some scripts
	FILEPATH='package.json'
	python - << EOF
	value = '''\t"scripts": {
	\t\t"dev": "webpack --mode development --watch",
	\t\t"build": "webpack --mode production"
	\t},\n'''

	with open("$FILEPATH", "r") as f:
	contents = f.readlines()
	contents.insert(1, value)
	with open("$FILEPATH", "w") as f:
	contents = "".join(contents)
	f.write(contents)
	EOF

	# finish with django migration
	cd ..
	python manage.py migrate