CODEWITHSUNDEEP
reactjsdjangoreact-router
finethen
finethen

Reputation: 433

Django & React: Connecting multiple apps from one template

Good morning,

I would like to ask, if it's possible to connect multiple apps in django, each using his own react frontend? For example: I have one main page that holds all the links to the different applications...

Folder-Structure:

|- project
|    |- app_main
|    |    |- templates
|    |    |   |- app_main
|    |    |   |   |- main.html
|    |- app_1
|    |    |- frontend_1 (react)
|    |    |   |- public
|    |    |   |    |- index.html
|    |- app_2
|    |    |- frontend_2 (react)
|    |    |   |- public
|    |    |   |   |- index.html

As I understood - or at least I think so -, the folder holding the html-files have to be included inside the template in settings.py...

settings.py

REACT_ROUTE_APP_1 = os.path.join(BASE_DIR, 'app_1', 'frontend_1', 'public')
REACT_ROUTE_APP_2 = os.path.join(BASE_DIR, 'app_2', 'frontend_2', 'public')

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
            REACT_ROUTE_APP_1,
            REACT_ROUTE_APP_2
        ],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

Is this the right way or is there a much better solution? And if it's the right choice, how can I connect the url-route inside my ?

main.html

<div>
    <a href="?">Link to App 1</a>
    <a href="?">Link to App 2</a>
</div>

Even though I thought Django & Reactwould be a popular combination, I found only a few related articles!

Thanks for your help and advice and have a great week!

Upvotes: 1

Views: 853

Answers (1)

itjuba
itjuba

Reputation: 528

Your folder structure is fine , you should use the URL router to redirect from main app to other apps

main urls.py

urlpatterns = [
    path("", include('main.urls')), 
    path("app_1/", include('app_1.urls')), 
    path("app_2", include('app_2.urls')), 

]

And in your app_1 urls.py :

urlpatterns = [
   path('',(TemplateView.as_view(
      template_name="app_1/index.html",
  )), name='index.html'),
]

html


<div>
    #URI + "app_1"
    <a href="app_1">Link to App 1</a>
</div>

Upvotes: 1

Related Questions