Migrating from browser-sync to django-browser-reload

Starting with version 3.1.0, Django-Tailwind is dropping support for Node.JS-based browser-sync and switching to Django-based django-browser-reload as the primary solution for seamless page and asset updates during development.

If you generated Tailwind CSS before 3.1.0, I strongly suggest you to upgrade your project.

If you don’t want to upgrade and are happy with browser-sync, make sure that you have TAILWIND_DEV_MODE=DEBUG set in your settings.py file.

Please follow the following migration steps.

1. Upgrade Django-Tailwind to its latest version:

   pip install django-tailwind --upgrade
   

2. Add django_browser_reload to INSTALLED_APPS in settings.py:

   INSTALLED_APPS = [
     # other Django apps
     'tailwind',
     'theme',
     'django_browser_reload'
   ]
   

3. Staying in settings.py, add the middleware:

   MIDDLEWARE = [
     # ...
     "django_browser_reload.middleware.BrowserReloadMiddleware",
     # ...
   ]
   

   The middleware should be listed after any that encode the response, such as Django’s GZipMiddleware. The middleware automatically inserts the required script tag on HTML responses before </body> when DEBUG is True.

4. Include django_browser_reload URL in your root url.py:

   from django.urls import include, path
   urlpatterns = [
       ...,
       path("__reload__/", include("django_browser_reload.urls")),
   ]
   

5. Now, cd to your TAILWIND_APP_NAME static_src directory. In my case, TAILWIND_APP_NAME is theme, thus I cd to theme/static_src:

   cd theme/static_src
   

6. Remove bs.config.js file from the theme/static_src directory.

7. Open package.json file in theme/static_src directory, and remove the following commands under scripts: sync, dev:sync, dev.

8. Staying in package.json, rename the dev:tailwind command under scripts to dev. That’s the only command we need for development from now on.

9. Staying in the same directory, uninstall dependencies we don’t need anymore, run the following command:

   npm uninstall browser-sync nodemon npm-run-all
   

10. Run python manage.py tailwind start to make sure everything runs properly.