How to implement mailing server with Next.js? - reactjs

I am pretty new to Next.js and I want to implement a mailing feature for a contact form which I have on the site. Since Next.js is SSR, if we need to use a mailer I wonder: do we still need to have a separate backend environment where we then need to install the mailer (for example Node.js and Nodemailer) or we can install the mailer (for example Nodemailer) directly into the Next.js setup?
I know there is an option for having separate Node.js server, proving an API endpoint and using this endpoint for triggering the method where we will send emails (and probably send all the values from the contact form as a parameters in the endpoint), but I wonder if the Next.js allows direct implementation of a mailer nested directly into it's setup.

Next.js allows for creating custom API routes right within the project.
Here are the Docs:
https://nextjs.org/docs/api-routes/introduction
You need to create files in pages/api and the endpoint will be mapped to /api/*

Related

How do I get 'api.example.com'

I am using NextJS and my understanding is that both the front-end and backend exist in the same location. For development, this would be both http://localhost:3000/about for any user who wants to visit the about page. However this means that any API routes I have in 'pages/api' will be visible whenever I just add that to my url, displaying JSON.
How is it that some sites are able to have the same domain and link but with api.website.com where all there other stuff is on website.com. That way any queries to the api and server are done with api.website.com as opposed to revealing anything on the main link?
It's because most websites have their api on a backend server using libraries like express. pages/api is just a next utility which comes under localhost:3000/api/{get-user} or your deployment uri/api/ which is mostly just used for development/testing/production if they don't have a backend server.

How to setup and use multiple Graphql endpoints in React

I want to setup two graphql endpoints for my project, one of the endpoints exposes schemas i use on a different part of the application, and the other i want to use for my graphql subscription, but i don't know how to setup my application to use multiple endpoints.
Remember that the split method can only take one http link and one websocket link. Now i don't know where the second endpoint for my subscription would come in.

Secure webapp with Django and React

I'm experimenting with these 2 technologies to make a secure web app [Currently learning React (60%) and Django (<50%). This is intended to be like a medical database, so doctors and nurses enters their patients' information. They need to login obviously. I wanted to implement React-based UI (And not using the classic method to create views from django), so I've found many tutorials just like this one:
https://www.digitalocean.com/community/tutorials/build-a-to-do-application-using-django-and-react
It basically turns Django into a restAPI, and then the React frontend uses axios to retrieve data from the endpoint. Sounds not bad at all (comparing to the native method of rendering data in a webpage from Django), but the problem is that I have no idea on how to make this secure, you know, Django provides an auth system, which is pretty good and secure, I have to say, but in a project with this structure, the auth needs to be done in React, so there many questions appear:
To start with, is it a good idea to make a project of this structure? (If no, then what could be a good one)
If it's a yes, how can I protect the API so only logged in users can interact with it? (What mechanisms to ensure protection)
Yes, this is absolutely a good idea to separate the client application and the backend server application.
You can access the backend through the rest api basically with any frontend framework/app/script.
Customers are able to extend their own applications with the abilities of your backend service.
You can create multiple different frontends that use the same backend or different parts of the same backend via the rest api (multi-branding, reselling). Or you can just swap the frontend framework every second year to a new one.
It's also easier to create different automations by using the rest api.
And the list goes on.
For django rest api auth I would recommend Token Authentication which is already included in the Django REST Framework and for React use this tutorial for implementing the login and the token handling.
And don't forget to use TLS on your servers, and create API documentation. (Example)

Can I change the API url of a third Party API?

I want to request a third party API on Web APP. The API example is https://api.pinesapsapi.com/request.
Can I change the URL and build a different URL with any of the external platforms or AWS?
The basic reason of the URL changing is to keep the API Url private with my developers.
Is this possible?
For Example:
https://api.pinesapsapi.com/request should look something like https://api.xhatdffsdkj.com/request or any other generic URL
If you're looking for an AWS service to specifically do this your best best would be using API Gateway.
Configure a REST API that uses a single method of /{proxy+} and configure it with HTTP_PROXY. You can then add a custom domain name to your API Gateway setup and have it proxy to this other other domain.
Alternatively you would be looking at using a proxy based solution to forward the requests to the endpoint (such as NGINX or HAProxy running on a host such as EC2).

Adding server-side rendering to existing React+Redux+React-Router App hosted on Firebase

I currently have a Single Page Application using( React+Redux+React-Router) hosted on firebase hosting. I want to implement server side rendering, for which I am aware I need to run a node/express server on something like Heroku, but I'm unclear how to do this. I have seen many starter boilerplates i.e Este that incorporate server-side-rendering but I want to add this capability to an existing Project. Somehow, The static content hosted on firebase should have access to my server but again unclear how to implement it so i can get al the benefits involved with SSR.
Since you are already using Firebase you can utilize Firebase functions.
Just setup a new function which intercepts your http request and then you just fetch all the stuff you need and render to a string with react routers render to string method.
There is a good tutorial covering all the bits and pieces of this here
https://m.youtube.com/watch?v=82tZAPMHfT4

Resources