I'm trying to integrate Django and Angular 4 in the same app (running as two servers as well).
Well, reading the setup guide I noticed about the references to the node_modules directory (and some "hardcode" references).
Well, I wanna know if is possible to merge those technologies, I mean, to use the Django context and the http.get of angular to bind the results.
Or, those npm_modules should are included in my static directory?
But, where I should generate the angular project?
I know this is an old thread, but I finally got this to work the way I want/need. I have a Django backend with DRF and I wanted to use Angular 4 for the front end. My app depends on user logins and running two debug servers (one for Django and one for Angular) was not an option for me.
The secret sauce is to run this command:
ng build --watch true --output-path <your_static_scripts_dir>
I created my Angular app (using ng new app-name) inside my Django project, copied the index.html into the templates directory (and modified it to use my staticfiles directory).
Now I can edit my files in PyCharm, the watch will recompile the .ts files and I only have to run the built-in Django debug server.
What you can do is use angular in front-end with nodejs or a parent make an api with Django using DRF or tastypie ... but if you absolutely want to combine the two would have to consider the versions prior to the 2+ I even develop in Django but as we want to be present on the mobile platforms and native also then to the fact of API's or sometimes we pass the weapon to the left using only javascript. But do not forget in the world of technology what really matters is adaptation and agility
Related
What is the best way to implement isomorphic react app using webpack with python as backend to serve
Following features are required to be implemented
1. React router
2. Redux store
By Isomorphic, I understand you mean both rendered on the server & on the client - so the first access of the site will return static HTML and a javascript bundle which then replaces the static HTML with the react-rendered version.
Usually this would mean running javascript on the server too with Node.js. This means you can render your JSX / React templates / components on the server and send them as static HTML to the user. If you're working with Python on the server, you cannot use your JSX / Javascript templating & logic on the server, so you'll need to duplicate it in Python.
So since you have to do it all twice - you first need to work out which one you want to do first. Either in Python first, or Javascript.
You can either start by building the whole application server-side-rendered, and then have javascript take over, or build a fully javascript application, and render the first views with Python.
Personally, for content-driven sites, I prefer building a server-side rendered application with Django (the most used Python Web Framework), and then adding Javascript on top once it's all fully working as a javascriptless site. This has the advantage of working even when javascript is disabled, and ensures you have good URLs, etc.
Of course, if it's a really complex application in terms of user interaction, you'll need to do it the other way.
I recomend looking into Django first, Here is a great tutorial from django-girls. However, if you want to go the mainly-JS route, here's some ideas:
Javascript First
Probably the best way is to first design your data structure(s), and make a REST api for your data. (e.g. /api/1.0/cars/rustbucket_94 which sends JSON data.)
Next, figure out your user-facing URL schema, and work out which REST endpoints need to be pulled in to get those pages. (How the URLs should look to the end users. e.g. /cars/rustbucket_94.html)
Design your React app as normal, using those REST / JSON endpoints, and the react router to show it correctly.
Once you have your whole react app working, you can now build a server-side rendered version of the whole thing, which you'll need to re-implement from scratch, and can either access the data through the JSON endpoints (slow) or by making the queries itself inside the pages.
The Python side
Which Python Framework to use on the backend?
I'd recommend Django to start with. It's very capable and can do ANYTHING you want it too. You probably need the Django REST framework too. There are other options available, but this will be the quickest way to get something secure and sane running.
Getting Django to work nicely with your webpack / react workflow is not too complex. There are projects like Django-Webpack-Loader and various tutorials about it online showing how to use it.
Good luck.
I am reading through the following tutorial:
http://v1k45.com/blog/modern-django-part-1-setting-up-django-and-react/
I can't quite grasp what the added value is of using something like django-webpack-loader to fully integrate react.js and django when you can completely decouple django from react, running a separate frontend which links to a DRF rest api.
I may be comparing apples to oranges here, but I am not sure. Any help ?
From the django-webpack-loader tutorial:
Now that we’ve handed off the build process webpack, only thing we need on the django side is to know which bundle to include in our html pages. This is where django-webpack-loader comes in. It’ll also raise exceptions when webpack fails to build a bundle and will show some useful information to help debug the problem. During development, webpack loader will also block requests while a new bundle is being generated so that only the latest bundles are loaded.
This is the core functionality of that loader. It tells django which are the current bundles to be served. It does not server side render your react app nor does it replace an API that the app needs to consume.
When developing a react app you usually use some kind of bundler that transpiles your javascript code to es5, uglyfies and minifies it. So every time your code changes a new bundle will be created containing your new javascript. A lot of people are using webpack for this task.
Now when a request arrives in django it needs to serve the basic html along with the css and js to be loaded by the client that contains the react app. So django needs to know the path to the files to link. But the path may constantly change when webpack rebuilds them. django-webpack-loader helps you to keep track of these changes and includes the correct paths to the current bundles for your react app to be fetched.
It is not a replacement for an API. Its sole task is to resolve the correct paths to your react app files.
EDIT
So the primary purpose of django-webpack-loader is to ensure that the paths to the most recent build are resolved correctly and in turn can be served. What is the reason these paths will change ?
Weppack appends a random hash to a new bundle like bundle.4j2a032fg.js. This way django can tell the client to cache the script so that it does not have to be re-request it every time. The client will only request a new bundle if the url/path changed. But this also requires that django knows the newest bundle with the correct hash.
does server side rendering occur with the use of Django templates ?
Server Side Rendering (SSR) in the context of react means that a nodejs server actually runs the react application once on the server to produce the initial markup of the app. This can then be statically served with the app. It reduces the perceived loading time for the user because the initial state of the app will immediately be shown and it allows for search engines to statically analyse the page which is good for SEO.
While django does render templates it is only the static html around the react app which it will render by default. Django does not render the react app itself. The react app still needs to initially render itself on the client. So to enable django do do true server side rendering you would have to run a nodejs process next to django that does the static rendering of the react app for django to serve.
In the tutorial they are using templates. Templates are loaded in the backend. So user gets fully rendered page.
With django rest framework you need to write seperate fronend. More about this: https://nickjanetakis.com/blog/server-side-templates-vs-rest-api-and-javascript-front-end
I want to start a new django project. This will just be a relatively simple website to test django itself. So the way all tutorials structure their project is this:
mysite
mysite
some_app
...
For me it's not very clear what does what. I don't really need any app right now. Could I implement my website without using any app? Should I use an app? What would it be called for a simple website?
Have you read Django doc already?
They have a nice tutorial on how to get started.
As for apps, in Django, you have a project containing one or more app. If you just want to try to build a simple website, your project called mysite will contain only one app.
I think you don't need more than the main mysite, BUT, at the django documents, have a session that says:
If your background is in plain old PHP (with no use of modern
frameworks), you’re probably used to putting code under the Web
server’s document root (in a place such as /var/www). With Django, you
don’t do that. It’s not a good idea to put any of this Python code
within your Web server’s document root, because it risks the
possibility that people may be able to view your code over the Web.
That’s not good for security.
Put your code in some directory outside of the document root, such as
/home/mycode.
This model may have been designed with focus on safety.
Some files in mysite could be used to control things in another apps, so i think that is a 'best pratice' to follow this model.
Font
if u aren't in need of an app you can avoid creating one. just give your view in views.py of your project set the url and u r all set to go.
here the first mysite folder is just an usual folder u can change the name in ur convenience next mysite is your project folder and recommended not to change it and next some_app is the application name(you can name your app anything relevant but in proper convention.)
and follow django documentation and djangogirls tutorial for better understanding.
https://docs.djangoproject.com/en/2.0/
https://tutorial.djangogirls.org/en/
i'm a bit of a newcomer to Django/Python but trying to figure something out--hope you can help.
I'm trying to create a personal website with a page dedicated to some of the Python and Django projects that I've completed through several different online courses.
I'm just having a tough time figuring out the best way to link through and assemble the project directories on my server.
My first project is just the files for my blog itself. I've created a new directory in the same home root as the blog project housing another of my django projects. Just looking for a bit of assistance on how i link out to the second project from my blog.
I thought i could use the urls.py file for my blog to redirect link to the second project (ie projects/project2) utilizing a views definition from the views.py file for one of the apps in the blog. But then--i'm getting tripped up on how to render that link to the second project.
Any forward guidance is greatly appreciated.
In general, anything that makes sense to be served under different domain (not necessarily subdomain) would better be a separate project for sure. Exceptional case would be a project with almost same functionality but different branding within same organization. In such case, Django's built-in sites framework can be considered.
For different projects, you need different project roots along with different wsgi/port bindings and processes. They can still be listed within a single nginx configuration as a deployment example. Another popular way is using Docker but deployment methods vary.
For different apps in a single project, there is only one binding and one root already. Create apps and list them in your settings.py and urls.py. If you need subdomains with single deployment, tkaemming/django-subdomains might be helpful.
For different policies (rarely) in a single app under different domains, learn about sites framework. You need to hand code the difference in views.
and so on...
For reasons out of my control, 2 Django projects were placed on 2 different AWS servers, both using the same RDS AWS database.
I want Project B to be able to access and manipulate the models (tables) used in Project A (where they were originally created).
Is this at all possible? Importing the Project A app over the network via the PYTHONPATH in some way?
Sorry...I lack the reputation to comment otherwise I would not have posted.
I think in this situation, you may need to make use of the Django REST Framework.
This way you can simple authorize the projects to talk to each other, DRF comes with httpbasic built in, but you probably should try to set up some type of hashed token as part of the auth.
I found this guide recently...although it's specific to mobile devices, it's probably one of the better walkthroughs of the DRF.