Show HN: Django and React SaaS boilerplate tutorial

• django-react-boilerplate

  21 581 0.0 JavaScript

  DIY Django + React Boilerplate for starting your SaaS (by saasitive)

  

As someone who works in Django a lot, their non-standard approach to defining models is wild.

ie.

Their approach in accounts models.py:

https://github.com/saasitive/django-react-boilerplate/blob/m...

Over the standard approach in their notes models.py:

https://github.com/saasitive/django-react-boilerplate/blob/m...

• django-webpack-loader

  10 2,491 7.9 Python

  Transparently use webpack with django

  

The biggest challenge to using Django with React IMO is getting the right blend of isomorphic rendering down. I don't want to go full SPA with Django as this defeats the purpose of Django IMO. Most parts of the site I want server-rendered, while in stateful parts I want React. So, let's say I have a site with 20 different React "apps" (i.e. stateful components) that I want to distribute amongst my various Django sections (Django "Apps" within the same project). And I want to do that with one webpackconfig. How do I tell my webpack where to put all those react bundles? The answer I've found is django-webpack-loader[1], however as you can see in the Issues section, one of the biggest limitations here is the inability to chunk React (and other issues).

Does anyone have a solution they like for this kind of isomporphic Django problem?

1. https://github.com/owais/django-webpack-loader

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• react-async-component

  1 1,447 0.0 JavaScript

  Resolve components asynchronously, with support for code splitting and advanced server side rendering use cases.

I've spent many years working on django including production setups for 3 different companies. My strong advice is to only use Django for API calls (DRF) and the built in admin UI. Do not use Django for ANY client facing static site rendering.

1. Deploy the React static pages and JS/CSS resources completely separately from Django. Cloudfront/S3 is my personal choice. You will need to tweak the CORS_ORIGIN_WHITELIST and CORS_ALLOW_HEADERS in the django settings but that's relatively easy.

2. Use Gatsy or something similar to help you with static site generation using react. Remember: React is in charge of HTML/JS/CSS of any type and Django should not get involved.

3. Use https://github.com/ctrlplusb/react-async-component or something similar to help break up your SPA so the browser doesn't have to load all of it at once and only loads smaller components on an as needed basis.

Don't mess with webpack and eject unless you have a very specialized need that cannot be addressed with everything out there.

• reactivated

  12 596 8.4 Python

That's exactly what https://github.com/silviogutierrez/reactivated does. It's a work in progress and docs are coming.

But it's the best of both worlds: Django SSR using statically typed JSX.

See for example my blog or business sites (on profile). Both SSRed by Django using React templates.

Then when the client loads, it gracefully "attaches" for dynamic interactive behavior as needed.

By far the biggest pain point is having to run node and python on the server. So I'm working on the best way to do that.

• cookiecutter-react-django

  1 132 4.9 JavaScript

  From hello world to Heroku deployment, using separated Front and Back Ends

In case you're looking for something similar, but django-boilerplate doesn't adjust, try cookiecutter-react-django instead. It has Heroku deployment, and a minimalistic approach.

https://github.com/ohduran/cookiecutter-react-django

• create-react-app-django

  1 0 0.0

  Easily Run a Create React App in a normal Django Template View

Yes. I have large portions of a server-rendered, stateful web application that leverages django’s view/templating.

However, being new to React I wanted to bring a single react “app” into the django project using a django template that includes the use of the same navbar template used by every other page in the site.

While it doesn’t support N react apps bundles at this time I could see it being done provided they share a single package file.

One important point for me was that this also be done using an unejected base CRA project, so that it would enjoy all of the benefits of the CRA standard dev and production build capabilities.

This was no small feat because I’m relatively new to modern web front end toolchains and in fact I ended up rewriting almost all of the user documentation for CRACO as part of my learning process.

Which is a key point I was able to accomplish this by using a mix of CRACO and options available to a standard CRA application.

In particular the package.json postbuild script action which moves and renames files to nestle assets into their proper place in a django static path.

I have not released my solution but I have stubbed out the problem and solution description here: https://github.com/banagale/create-react-app-django

• django-sockpuppet

  4 440 0.0 Python

  Build reactive applications with the django tooling you already know and love.

> Django with React IMO is getting the right blend of isomorphic rendering down. I don't want to go full SPA with Django as this defeats the purpose of Django IMO.

What we want from something like react after all is reactivity, and it's possible to get that if you were to use something like https://github.com/jonathan-s/django-sockpuppet

So if you've got an open mind and want to test it's there for the taking.

• InfluxDB

  www.influxdata.com sponsored

  Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  

• Next.js

  2,041 120,572 10.0 JavaScript

  The React Framework

  

As for other points, let me elaborate on web analytics. Google Analytics default seup collect around 70-80% of transactions/events/pageviews data. If you want to fix this, you revert to server-side stuff, and that's where you meet js-based navigations.

That's when you either try to go this way with gatsby: https://www.gatsbyjs.com/plugins/gatsby-plugin-no-javascript... .

That's when you are stuck with sapper: https://stackoverflow.com/questions/64507516/how-to-disable-... .

That's when you end up in tickets like this with Nextjs: https://github.com/vercel/next.js/issues/4381 . And never look back.

• cash

  19 6,417 4.5 JavaScript

  An absurdly small jQuery alternative for modern browsers. (by fabiospampinato)

https://github.com/fabiospampinato/cash of you want to build website, vue.js if you want to build an app. In app world, vue.js (options api) can get up and running faster than react. After you master app development, it comes down to ecosystem/tooling (pros and cons here with both react and vue) and mostly - personal preference.

Suggest a related project