I've almost finished developing my frontend in Angular 2 using static json files as API mocks. Now I want to use it with my real API from Django, and I'm struggling with few issues, since it is my first Angular 2 frontend.
I've moved whole Angular project generated by Angular CLI as frontend directory within my Django project. Django is exposing API at /api, and I want to perform request to that API from Angular. In production, Angular sources will be transpiled into javascript and moved into static (i guess), but I don't know how to handle it during development.
Is it possible to run Django development server with Angular ng serve on the same port at the same time? If I'll run them at different ports, I will need to hardcode my API url in frontend, and enable CORS which won't be enabled in production.
What are the best practices to develop Angular with Django?
Related
I have a background in Django and a some experience in Vue. I have used Vue for almost a year now, but since I need an SSR I have to use Nuxt.However, I am still very confused with how to deploy it in the server along with Django. Should I deploy them in the same server or should I deploy them in a different server with Django server for API and Nuxt for the front end?
I have also used Vue alongside Django for a while in my project and I'm looking into Nuxt right now.
I'm planning to migrate my standard Vue codebase into a Nuxt project.
The thing that I'm looking to do is to deploy Nuxt as a server target: 'server' (which is the default) alongside Django in Docker containers.
The idea is to be able to start the application with a simple docker-compose up.
I'm not done yet but you could look at it.
Typically, your docker-compose file would have 3 service :
The Django backend (API)
The Nuxt frontend (which make calls to the backend API)
Nginx which would route the traffic to Django or Nuxt according to your needs
EDIT BELOW :
Meanwhile, I changed my mind and instead of having Nuxt running as a server, I only have 2 containers :
The Django backend (API)
Nginx which serves my built Vue frontend and routes the traffic accordingly
I created front end in Reactjs and backend in Django and linked using Django rest API. but react runs in localhost:3000 and Django in localhost:8000. How to combine or integrate these two and runs in the same address.
Development
If you are in the development phase and using Create React App then you can add "proxy": "http://localhost:8000" to your package.json. Then your api requests done in React will be forwarded to port 8000.
Production
The production setup is quite different. You'll want to run yarn build and let either Django itself or nginx serve the index.html. In that case there won't be multiple ports anymore since the React build is just static files.
I am creating an example real world project as we speak with the same stack (GitHub). It doesn't have production setup quite ready yet, but you can see my development setup if you want some inspiration.
You need to link them using the routes you created in your backend. Put the routes in fetch requests in React frontend and call them via GET or POST methods etc. Your users will only hit the frontend host address once you deploy your application to the server.
Django REST with SPA "within" or completely stand alone?
I'm diving into a new project where I'll try to build a SaaS web application and I've set on using Django Rest (with Postgres to utilize schemas) and React/Vue on the frontend.
What I'm unsure and what I can't seem to get an answer to is the way people structure these frameworks. E.g, on https://www.valentinog.com/blog/drf/ the author writes:
I see the following patterns (which are common to almost every web
framework):
React in its own “frontend” Django app: load a single HTML template
and let React manage the frontend (difficulty: medium)
Django REST as a standalone API + React as a standalone SPA
(difficulty: hard, it involves JWT for authentication)
Mix and match: mini React apps inside Django templates (difficulty:
simple)
And here are my advices.
If you’re just starting out with Django REST and React avoid the
option 2.
Go for option number 1 (React in its own “frontend” Django app) if:
you’re building an app-like website
the interface has lot of user interactions/AJAX
you’re fine with Session based authentication
there are no SEO concerns
you’re fine with React Router
Why is this beneficial, and is it actually different from having a stand alone rest api and a standalone SPA? The reason I wanna use Django is so I don't have to worry about authentication and authorization, and I also plan on utilising the admin panel - will this "not work" if I were to use two completely standalone applications for the backend and frontend? (e.g django rest with the sole purpose of exposing the api and the frontend to consume it).
What alleged benefits do I get from having django rest and SPA in the same "root" project
I have successfully deployed django rest framework backend and angular 8 frontend apps independently on Heroku. I'm clueless whether they should be deployed as separate apps or should be integrated on single instance. What is the best practice when it comes to DRF and SPA,particularly angular? If to be deployed as independent app,how can I configure DRF backend to respond to the frontend in another server. Any help would be appreciated. Thanks
I'm learning ReactJS and I already have experience with Django and DRF. My aim right now is to build a rather simple web application based on a Django backend and a ReactJS frontend. (Later on, when the web app is done, I'll tackle React Native).
I've been reading tons of documentation but nothing has sorted out the question:
What is the best approach to integrate a Django backend with a ReactJS frontend?
Should I keep them separate and connect them or should I mount ReactJS inside the Django application? Which one is the best-suited approach, taking into account maintenance and further development?
Thank you very much! Any opinion/hint will be appreciated.
My approach would be make an app called frontend or anything you like in Django, then all of my React code will be placed inside that app. You will also need webpack to bundle your React code then with collectstatic command Django will collect all the static files so it could be served. You can find the tutorial here