{ "info": { "author": "Luka Maljic", "author_email": "luka@maljic.com", "bugtrack_url": null, "classifiers": [ "License :: OSI Approved :: MIT License", "Operating System :: OS Independent", "Programming Language :: Python :: 3" ], "description": "[](https://badge.fury.io/py/django-parcel-ssr)\n\n# Django Parcel SSR\n\nZero configuration performant JavaScript server side rendering for [Django web framework](https://www.djangoproject.com/), powered by [Parcel bundler](https://parceljs.org/). \n\n## Install\n\n```bash\npip install django-parcel-ssr\nnpm install parcel-bundler esm\n```\n\n[React](https://reactjs.org/) is supported out of the box, but any JavaScript view library with server side rendering support can be used instead (see `scripts` option and [examples](examples)). To use React install additional dependencies:\n\n```bash\nnpm install react react-dom react-helmet styled-jsx\n```\n\nDefault React setup comes with optional [`styled-jsx`](https://github.com/zeit/styled-jsx) CSS-in-JS support for writing CSS which applies only to a single component. To use it, add the `.babelrc` file with the plugin to your project root:\n\n```json\n{\n \"plugins\": [\n \"styled-jsx/babel\"\n ]\n}\n```\n\n**Note for TypeScript users**: Parcel 1.x doesn't support Babel plugins for TypeScript out the box. Check out the [TypeScript example](examples/typescript.md) for a workaround.\n\nUpdate `INSTALLED_APPS`, `TEMPLATES`, and `STATICFILES_DIRS` entries in `settings.py`:\n\n```python\nINSTALLED_APPS = [\n 'ssr',\n # ...\n]\n\nTEMPLATES = [\n {\n 'BACKEND': 'ssr.backends.javascript.Components',\n 'DIRS': [],\n 'APP_DIRS': True,\n 'OPTIONS': {\n # 'extensions': ['js', 'jsx', 'ts', 'tsx'],\n # 'output_dirname': 'dist/',\n # 'json_encoder': 'django.core.serializers.json.DjangoJSONEncoder',\n # 'cache': True,\n # 'env': {\n # 'NODE_ENV': 'development' if DEBUG else 'production',\n # 'NODE_OPTIONS': '-r esm',\n # 'WORKER_TTL': 1000,\n # },\n # 'scripts': {\n # 'server': os.path.join(BASE_DIR, '.ssr', 'scripts', 'react', 'server.js'),\n # 'client': os.path.join(BASE_DIR, '.ssr', 'scripts', 'react', 'client.js'),\n # }\n }\n },\n # ...\n]\n\nSTATICFILES_DIRS = (\n os.path.join(BASE_DIR, '.ssr', 'static'),\n # ...\n)\n```\n\nInitialize server side rendering in `wsgi.py`:\n\n```python\n# ...\nimport ssr\nssr.setup()\n```\n\nWe recommend adding `.ssr/` directory to `.gitignore`, to avoid committing your builds.\n\n## Usage\n\nJavaScript files in `bundles` directories of installed Django apps serve as Parcel entry points and they have to provide a root component as default export. **Avoid putting non root components in `bundles` directories** to prevent unnecessary bundling:\n\n- `bundles/`\n - `template.js`\n- `components/`\n - `layout.js`\n - `navbar.js`\n - `...`\n\nCreate an example `bundles/template.js` file in an installed app directory:\n\n```javascript\nimport React from 'react'\nimport { Helmet } from 'react-helmet'\n\nexport default props => {\n const [count, setCount] = React.useState(props.count)\n return (\n