I have GeoDjango running on a digital ocean droplet and I'm rewriting project from VueJs to NextJs hosted on Vercel.
In Vue we have service pattern connected with store that is responsible for fetching and updating data.
I figured out the fetching part which is quite good but I'm still trying to figure out the best way to update data.
How should I construct the CRUD layer without using the NextJs API folder ( I don't want to have another backend calling my Django backend).
Should I use context?
Should I use middleware?
Should I create custom services? How to call them then? Is there an equivalent of store in NextJs?
I'm asking because I want to avoid cluttering as right now I'm using fetch POST on pages. I'm using NextAuth that gives me a context with jwt token.
Thank you for any hints
For Next.js, you can use rewrites to proxy requests to your backend. This way you can access your existing backend from relative URLs just like if they were in your API routes. You can do this explicitly for each route, Or you can use the incremental adoption pattern which will check for an existing route in your Next.js app before proxying the request back to your django server.
// next.config.js
module.exports = {
async rewrites() {
return {
fallback: [
{
source: '/api/:path*',
destination: `https://your.django.app/api/:path*`,
},
],
}
},
}
Related
I have a Nuxt frontend deployed to Google App Engine.
Can I deploy Strapi to Netlify? Or is there a platform where I can deploy Strapi for free?
Also after deploying what is the exact setting which needs to be changed in Nuxt?
My settings with apollo.
apollo: {
clientConfigs: {
default: {
httpEndpoint: 'http://localhost:1337/graphql',
},
},
},
#nuxtjs/strapi Settings in Documentation.
modules: ['#nuxtjs/strapi'],
strapi: {
entities: ['restaurants', 'categories'],
url: 'http://localhost:1337'
},
I guess I have to place the Heroku URL in place of localhost:1337 if I use #nuxtjs/strapi which I am not using currently?
What if I want to use apollo? Where should I put the Heroku URL as it has httpEndpoint field for graphql URL?
Strapi needs a Node.js server, so Heroku is a good idea. They do have a free tier dyno that takes some time to spin up but there is no issue since you will use it as a headless CMS.
Once deployed, you'll need to update the URL of Strapi in nuxt.config.js. And I guess that it's pretty much all.
You will have all of your info in their official docs: https://strapi.io/documentation/developer-docs/latest/setup-deployment-guides/deployment/hosting-guides/heroku.html
We've built a framework around Nuxt to get it to work with WordPress really well. We have been pulling our hair out trying to get post previewing working.
A common setup will be a WordPress install running on a domain like http://api.example.com and then to have Nuxt running on http://www.example.com. There is a WordPress plugin called WP-Graph-QL that creates a GraphQL endpoint like http://api.example.com/graphql, and we wrote a CORS plugin to set the correct CORS headers to work with whatever the frontend origin may be. This is that plugin if you are curious https://github.com/funkhaus/wp-graphql-cors
Our Nuxt Apollo setup is this:
export default function() {
return {
httpEndpoint: process.env.DEFAULT_ENDPOINT,
getAuth: () => process.env.BASIC_API_TOKEN || "",
httpLinkOptions: {
credentials: "include"
}
}
}
FYI sometimes the API will be hidden behind a Basic Auth UN/PW (like when on a staging site for example), that is what the getAuth function is doing.
This all seems to work client side, but it fails on SSR for some reason. It seems the cookies don't get sent in the SSR request, but they do in the client side request. Am I missing something super obvious here?
NOTE: I asked this question here 8 days, but am trying here for more attention
I have an website in Django that is using the REST framework to provide an API.
Is there a way to generate an API client that can be used to communicate with this API that provides objects mapping the contents of the API?
If you're talking about a javascript client API, I have a django management task that I use to generate a javascript library from my DRF API
using AngularJS 1.*. I'm still using DRF 2.4, for easy nested object writes, and Django 1.7. Here it is as a github gist
Take that file, stick it in <app>/management/commands/ and call it like:
python manage.py rest_framework_2_js rest_api.gen.js [base_factory_name] [server_base_url]
If your base_factory_name was foo and you had an API object at server_base_url/Bar/ named Bar, you would use it like:
foo.Bar.get(42)
.then(function(bar_inst) {
console.log(bar_inst);
bar_inst.baz = 77;
bar_inst.save()
.then(function() {
console.log('bar_inst has been saved');
});
})
or
foo.BarList.get('filter_a=5&field_filter_b=abc,d')
.then(function(data) {
console.log(data.results);
})
Each instance in the data.result will be a foo.Bar instance.
You can add callbacks before sending to the server and after retrieving from the server using foo.Bar.pre_save(function (inst) {/*callback mutator*/}) and foo.Bar.post_restore( function(inst) { /*callback mutator*/}).
Anyways, this management task is not productized and it has only one user - me, but I have been using it for 2 years and it works great for me :-) We can work to get it working in your configuration if you like. Naturally the biggest caveat is the AngularJS 1.* dependency.
I'm creating a web application using Django as the backend and Angular for the front.
Angular is running on a Yeoman stack on localhost:9000 while Django is running on localhost:8000 and I'm using grunt-contrib-proxy to redirect all the $http calls from angular at /api to the django port. So for example, if Angular asks for localhost:9000/api/hello this will be redirect to localhost:8000/api/helloand django will serve it.
I'm planning to setup Django Rest Framework for serving all the Angular request to the /api path.
So far so good.
Now, I have an already configured and working installation of Django-allauth for making Oauth authentication to third party services. It does work using plain old Django but I have no idea how to make this work in conjunction with Angular.
The only thing that came into mind was serving the allauth views through django rest framework, but what about redirection after authentication? I can't wrap my mind around it.
Is it better to drop this approach and make the Oauth authentication straight from the front (Angular)?
EDIT:
I managed to call the login view from Angular
In grunt-contrib-proxy I've added the account context and rewrite rule:
context: ['/api', '/accounts'],
rewrite: {
'^/api': '/api',
'^/account': '/accounts'
}
I've made an ajax call from angular, asking for the allaluth login view (for example for github): $http.get('/accounts/github/login/?process=login')
The problem is that I get back:
XMLHttpRequest cannot load https://github.com/login/oauth/authorize?scope=&state=BlaBla&redirect…ub%2Flogin%2Fcallback%2F&response_type=code&client_id=BlaBlaBla. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9000' is therefore not allowed access. (index):1
(The BlaBla was added by me). I think I'm doing something totally wrong
You need to add an
Origin: http://localhost:9000
to the header in the request that angular sends to Django.
Also make sure the server running Django returns an
Access-Control-Allow-Origin: *
see here for more information.
I'm trying to create a very basic little backbone app that displays stats from my company's Harvest account. They have a REST API which authenticates via Basic Auth or oAuth. I seem to be faced with two problems here:
Authentication
Cross-origin requests
So I've started with setting the url for my collection to the respective url:
var Projects = Backbone.Collection.extend({
url: 'https://mycompany.harvestapp.com/projects',
});
And I've tried using this basic auth plugin but I can't tell if that part is working because I'm still getting Access-Control-Allow-Origin errors.
What's the best way to go about this?
This other StackOverflow question is similar and has more details that you should take a look at.
But the general idea is this, if you don't have access to the remote server (which I presume you do not with Harvest) then you need to perform the cross-site requests from your own server that you do control, most likely the one you are deploying this backbone app on. That means writing some server-side code (PHP, Node, etc.) to perform the requests (perfectly legal from server side) and then having your client (Backbone app) request from these scripts.
Here is a brief/pseudo-example with php:
request.php
<?php
echo file_get_contents('https://mycompany.harvestapp.com/projects');
?>
projects.js
var Projects = Backbone.Collection.extend({
url: 'request.php',
});