So I have a Django project that acts as a backend REST server, and I would like to integrate that with an existing React project that makes AJAX calls to this REST server. Again, both of these projects already exist, I just want to connect them. Let's say the root of my Django project is DJANGOROOT and that is where manage.py is located. My Django project has a couple of Django apps that are part of the project. Let's say my Django project is called "mydjangoproj", the two Django apps are called "myapp1" and "myapp2" and the React project is called "myreactproj". Each of these two projects (the Django project with the two apps, and the React project) is stored in a separate GIT repo and to connect them on my server I have the following directory structure:
DJANGOROOT/
DJANGOROOT/mydjangoproj
DJANGOROOT/mydjangoproj/settings.py
DJANGOROOT/mydjangoproj/urls.py
DJANGOROOT/mydjangoproj/static/
DJANGOROOT/mydjangoproj/templates/
DJANGOROOT/myapp1
DJANGOROOT/myapp2
DJANGOROOT/myreactproj
DJANGOROOT/myreactproj/package.json
DJANGOROOT/myreactproj/src
DJANGOROOT/myreactproj/src/index.js
etc
Note that the React app root folder is inside DJANGOROOT and is parallel to my django project and app folders.
The React app uses an npm module called react-scripts (see https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-build) that has a build script that will build all the stuff in DJANGOROOT/myreactproj/src (staring with index.js) and will put all this in a folder called DJANGOROOT/myreactproj/build. When I run the build (using "npm run build") it fills up the folder DJANGOROOT/myreactproj/build like this:
DJANGOROOT/myreactproj/build
DJANGOROOT/myreactproj/build/index.html
DJANGOROOT/myreactproj/build/{several other files}
DJANGOROOT/myreactproj/build/static
DJANGOROOT/myreactproj/build/static/css
DJANGOROOT/myreactproj/build/static/js
DJANGOROOT/myreactproj/build/static/media
So it appears that to connect Django to my React app, I have to find a way to have the root path for Django (mydomain.com/) point to DJANGOROOT/myreactproj/build/index.html. I understand that I must create a "home" template that is launched by the Django view that runs at mydomain.com/, and that home template has to launch the React app something like this:
{% load render_bundle from webpack_loader %}
{% render_bundle 'main' 'js' 'DEFAULT' %}
But I'm not sure how exactly I need to tell Django where to look for main.js (or is it index.js) and I'm not sure how to get Django to see all the static stuff in DJANGOROOT/myreactproj/build/static.
I also ran "npm list webpack" inside DJANGOROOT/myreactproj to get the version of webpack, and it shows this:
└─┬ react-scripts#1.0.11
└── webpack#3.5.1
I assume this means that webpack 3.5.1 is being used and is somehow bundles with react-scripts v 1.0.11
Also note that the Django app is already running under HTTPS under NGINX and UWSGI, so this is a real server not a dev server.
Can someone who has been through this process shed some light on what I need to do to hook this all up properly?
If your react app is using django just to get data via REST, why you want to use react in django templates? I think preferred approach here is separation not integration. Create standalone react app with its own server (both can run on one physical server of course) - this way your react app and django app will communicate only by rest calls and nothing else needed. If you have some assets in django app - move them to frontend react app.
Related
I just started a new little project for learning purposes and I want to try out Vue js with Django (with DRF). I'm trying to use vue loader (webpack-simple template).
The problem is that I don't know how to synchronize npm run dev and python manage.py runserver. I don't know how to access a template that is rendered by django in webpack-dev-server.
I mean I have a template with django-template specific keywords like {% load static %} that is not handled by webpack-dev-server, obviously.
I know I can build it everytime npm run build, but that's kinda annoying and boring to wait for it everytime I want to make a little change.
In webpack, it's specified to run on a default index.html file, how can I make it work on the template that is actually rendered on 127.0.0.1:8000 with python manage.py runserver running? I know it doesn't make any sense to run 2 dev servers, but I don't know how to explain in other way.
Is there an alternative?
Thanks in advance for answers!
Run your Django server as normal. webpack shouldn't serve your files. It should just build them (use webpack development settings and webpack --watch) and let webpack put them in the static directory of your Django project, e.g.
// in your webpack config
output: {
path: path.resolve(__dirname, 'project/static/js')
}
That way Django can serve the files that are run through your webpack pipeline.
On top you can use the webpack live reload plugin and the live reload browser extension to auto-reload when your assets change.
When you are ready to commit your changes, build your files in production mode and commit the build files in the static dir.
Am trying to set up multiple website with same base. While browsing, came to know Django has Sites framework which I could use.
I didnt get how to set multiple settings.py file with site id. Any ideas anyone?
Thanks in advance :)
To serve multiple sites from the same Django instance you do not need multilple settings.py files.
A simple method is to omit the SITE_ID setting from the Sites framework. Then include the Sites framework middleware:
'django.contrib.sites.middleware.CurrentSiteMiddleware'
This automatically passes a request object to Site.objects.get_current() on every request. It also allows your Django application to detect the current site via request.site.
You would need to make sure to setup multilple virtual hosts using your NGINX or apache instance to route traffic from each site to your server.
you can have multiple setting file for example develop.py and production.py
steps:
create a settings folder inside the project
Add all of the settings file to that folder
while running server
./manage.py runserver -- settings=project_name.settings.required_settingfile
for example:
./manage.py runserver --settings=myproject.settings.develop
I have this app built with flask and now i'm trying to run it on my phone with phonegap.
Although the way i have it organized originally with flask is something like this:
/project
run-dev.py
config.py
/phonegapfolder
/app
user.py
forms.py
views.py
__init__.py
/templates
index.html
My problem comes from the fact that phonegap demands its main html to be the one in
/phonegapfolder/www/index.html
Of course it's useless to just copy my index.html from one folder from another, because we will not find the python files that lie within the app folder.
You best solution would be to use flask on a backend (remote) server and have the PhoneGap application make server requests to the flask server.
PhoneGap projects require that the index.html be set within the application (www) folder.
This post on Reddit might be able to clarify some of the details.
I know fixtures can be loaded in the tests.py like this:
fixtures = ['example.json']
Django automatically search all the apps' fixture directory and load the fixtures.
However, I create a reusable app named accounts and in accounts I also have the fixtures/example.json file. But when I installed the accounts app and write it into the INSTALLED_APP settings, the fixture cannot be loaded. I am curious why it happens.
Django == 1.8.2
You might be able to load those fixtures if:
Your app fixtures are accessible, if the app is in the same project structure they are directly accessible
If the app is installed by setup.py the files should be included with package_data={'mypkg': ['fixtures/*.json']} depending on your configuration
You have to know where your virtualenv is located in the local system, this way you can tell Django in settings where fixtures are located, imagine virtualenv is located in parent directory from project, you can point to fixtures like this:
Settings.py:
ENV_DIR = os.path.join(os.path.dirname(__file__), '..')
FIXTURE_DIRS = (
os.path.join(VENV_DIR, "virtualenv/lib/python2.7/site-packages/yourapp/test/fixtures"),
)
Note that it will depends on local system, not a clean solution, but it works, pay attention if you are running tests on remote systems like jenkins because you'll have to change this configuration according to the server deployment settings.
I'm trying to install the following django app from the cheeseshop:
https://bitbucket.org/codekoala/django-articles/overview
This is my first day of Django-ing and I'm unsure what to do to get the app's folder populated inside my project.
So far, I've pip installed the app into my virtualenv. This is verified by opening a python shell and getting no errors when I run "import articles"
I've edited the settings.py file and added it to the list of installed apps. I believe this to be OK as I can then run runserver without any "module not found" errors.
syncdb also ran fine.
Where do I go from here?
ie, I would like to have a section of the website called News which uses this app. I have no routes or other apps configured yet, just a clean Django with psycopg2.
EDIT: Enabling the default admin site, I can manage the Articles there, but still unsure of how these will be displayed on the site when I have no app folder created for them. When trying to startapp articles, I'm warned it's conflicting name with an existing module..
No need to create a new app called articles. As you are able to import articles via the python console you have successfully installed it. You can find it in your virtualenv folder in the folder site-packages:
/path_to_your_virtualenv/.virtualenvs/<virtualenvname>/lib/<pythonversion>/site-packages
You can use this app, installed via pip, as it is an app which lives in your project folder.
You just need to include the articles urls in your own urls.py. Since you say you want it under News, this would do fine:
urlpatterns = patterns('',
(r'^news/', include('articles.urls'),
)
Note though that the readme for the articles app implies that you'll need to create your own base template for it to inherit from. Just create a base.html file in a directory called templates under your project, give it a basic HTML structure, and put in {% block content %}{% endblock %} in the relevant place (and the same for the other blocks mentioned in the readme).
You should probably do the Django tutorial anyway, to understand exactly what's going on with the URL and the templates.