Giter Club home page Giter Club logo

django-react-integration's Introduction

django-react-integration

Stack

  • Django
  • React

Tutorial

  1. Instalamos Django
pip install Django
  1. Creamos el proyecto ejecutando
django-admin startproject django_react
  1. Ingresamos a la carpeta del proyecto
cd django_react
  1. Verificamos si tenemos instalado node js
node --version

Si lo tenemos instalado deberia dar la versión en el terminal, usualmente se encuentra instalado en Mac OS, de no ser el caso la guia de instalacion se encuentra en https://nodejs.org/en/.

  1. Creamos la app de react dentro de la carpeta de nuestro proyecto de Django
npx create-react-app reactapp

La estructura de los archivos deberia ser la siguiente, tengala en consideracion para los siguientes pasos.

django_react
│ 
└───django_react
│   │──__init__.py
│   │──asgi.py
│   │──settings.py
│   │──urls.py
│   └──wsgi.py
└───reactapp
  1. Nos desplazamos al directorio de la app que acabamos de crear
cd reactapp
  1. Agrupamos la aplicación en archivos estáticos para producción.
yarn build
  1. Modificamos /settings.py

       Importamos modulo os

import os

       En templates agregamos el path de nuestro build de la app de react

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
            os.path.join(BASE_DIR, 'reactapp/build'),
        ],
        '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',
            ],
        },
    },
]

       y creamos la siguiente variable al final del archivo

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'reactapp/build/static'),
]
  1. Modificamos /urls.py
from django.contrib import admin
from django.urls import path
from django.views.generic import TemplateView

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', TemplateView.as_view(template_name = 'index.html'))
  1. Probamos
python manage.py runserver

Y si todo sale bien entonces deberiamos ver algo asi:
Tutorial creado por José Izam.

django-react-integration's People

Contributors

joigmz avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.