use jinja2 to render package.json (#1849)

reflex/.templates/jinja/web/package.json.jinja2

@@ -0,0 +1,21 @@
+{
+  "name": "reflex",
+  "scripts": {
+    "dev": "{{ scripts.dev }}",
+    "export": "{{ scripts.export }}",
+    "export-sitemap": "{{ scripts.export_sitemap }}",
+    "prod": "{{ scripts.prod }}"
+  },
+  "dependencies": {
+    {% for package, version in dependencies.items() %}
+    "{{ package }}": "{{ version }}"{% if not loop.last %},{% endif %}
+
+    {% endfor %}
+  },
+  "devDependencies": {
+    {% for package, version in dev_dependencies.items() %}
+    "{{ package }}": "{{ version }}"{% if not loop.last %},{% endif %}
+    
+    {% endfor %}
+  }
+}

reflex/.templates/web/package.json

@@ -1,29 +0,0 @@
-{
-  "name": "reflex",
-  "scripts": {
-    "dev": "next dev",
-    "export": "next build && next export -o _static",
-    "export-sitemap": "next build && next-sitemap && next export -o _static",
-    "prod": "next start"
-  },
-  "dependencies": {
-    "@chakra-ui/react": "^2.6.0",
-    "@chakra-ui/system": "^2.5.6",
-    "@emotion/react": "^11.10.6",
-    "@emotion/styled": "^11.10.6",
-    "axios": "^1.4.0",
-    "chakra-react-select": "^4.6.0",
-    "focus-visible": "^5.2.0",
-    "json5": "^2.2.3",
-    "next": "^13.3.1",
-    "next-sitemap": "^4.1.8",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "socket.io-client": "^4.6.1",
-    "universal-cookie": "^4.0.4"
-  },
-  "devDependencies": {
-    "autoprefixer": "^10.4.14",
-    "postcss": "^8.4.24"
-  }
-}

reflex/compiler/templates.py

@@ -83,3 +83,6 @@ SITEMAP_CONFIG = "module.exports = {config}".format
 
 # Code to render the root stylesheet.
 STYLE = get_template("web/styles/styles.css.jinja2")
+
+# Code that generate the package json file
+PACKAGE_JSON = get_template("web/package.json.jinja2")

reflex/constants.py

@@ -136,6 +136,8 @@ TAILWIND_CONTENT = ["./pages/**/*.{js,ts,jsx,tsx}"]
 TAILWIND_ROOT_STYLE_PATH = "./tailwind.css"
 # The Tailwindcss version
 TAILWIND_VERSION = "tailwindcss@^3.3.2"
+# The package json file
+PACKAGE_JSON_PATH = os.path.join(WEB_DIR, "package.json")
 # The NextJS config file
 NEXT_CONFIG_FILE = "next.config.js"
 # The sitemap config file.
@@ -351,6 +353,36 @@ class RouteRegex(SimpleNamespace):
     OPT_CATCHALL = re.compile(r"\[\[\.{3}([a-zA-Z_][\w]*)\]\]")
 
 
+class PackageJsonCommands(SimpleNamespace):
+    """Commands used in package.json file."""
+
+    DEV = "next dev"
+    EXPORT = "next build && next export -o _static"
+    EXPORT_SITEMAP = "next build && next-sitemap && next export -o _static"
+    PROD = "next start"
+
+
+PACKAGE_DEPENDENCIES = {
+    "@chakra-ui/react": "^2.6.0",
+    "@chakra-ui/system": "^2.5.6",
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
+    "axios": "^1.4.0",
+    "chakra-react-select": "^4.6.0",
+    "focus-visible": "^5.2.0",
+    "json5": "^2.2.3",
+    "next": "^13.3.1",
+    "next-sitemap": "^4.1.8",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "socket.io-client": "^4.6.1",
+    "universal-cookie": "^4.0.4",
+}
+PACKAGE_DEV_DEPENDENCIES = {
+    "autoprefixer": "^10.4.14",
+    "postcss": "^8.4.24",
+}
+
 # 404 variables
 SLUG_404 = "404"
 TITLE_404 = "404 - Not Found"

reflex/utils/prerequisites.py

@@ -24,6 +24,7 @@ from packaging import version
 from redis import Redis
 
 from reflex import constants, model
+from reflex.compiler import templates
 from reflex.config import Config, get_config
 from reflex.utils import console, path_ops, processes
 
@@ -216,7 +217,11 @@ def initialize_app_directory(app_name: str, template: constants.Template):
 def initialize_web_directory():
     """Initialize the web directory on reflex init."""
     console.log("Initializing the web directory.")
+
     path_ops.cp(constants.WEB_TEMPLATE_DIR, constants.WEB_DIR)
+
+    initialize_package_json()
+
     path_ops.mkdir(constants.WEB_ASSETS_DIR)
 
     # update nextJS config based on rxConfig
@@ -233,6 +238,27 @@ def initialize_web_directory():
     init_reflex_json()
 
 
+def _compile_package_json():
+    return templates.PACKAGE_JSON.render(
+        scripts={
+            "dev": constants.PackageJsonCommands.DEV,
+            "export": constants.PackageJsonCommands.EXPORT,
+            "export_sitemap": constants.PackageJsonCommands.EXPORT_SITEMAP,
+            "prod": constants.PackageJsonCommands.PROD,
+        },
+        dependencies=constants.PACKAGE_DEPENDENCIES,
+        dev_dependencies=constants.PACKAGE_DEV_DEPENDENCIES,
+    )
+
+
+def initialize_package_json():
+    """Render and write in .web the package.json file."""
+    output_path = constants.PACKAGE_JSON_PATH
+    code = _compile_package_json()
+    with open(output_path, "w") as file:
+        file.write(code)
+
+
 def init_reflex_json():
     """Write the hash of the Reflex project to a REFLEX_JSON."""
     # Get a random project hash.