NextJS with express - separate or together - reactjs

I'm developing the NextJS app with express, postgresql, is it good approach to put the API endpoints in the next.js pages/api folder? Or should it be separated?
I thought about separating it to client/server folders, but I don't know how to share the cookies between 2 ports on localhost (I want to use httpOnly cookie for authentication), because my server was running on 3030, and nextjs app on 3000, so I thought that maybe I should keep everyting in next.js and create endpoints in pages/api.
Which one is the better solution?

Related

How to deploy next.js frontend and separated express backend

I'm developing an app that contains next.js as a frontend and separated backend server running on express. I'm wondering about production deploy and costs, I did some research but I'm not sure what's the best way to do it.
My folder structure is following. I have separated packages.json on the frontend and separated on the backend. Two apps also run on different port. Also I'm doing SSR on the frontend.
Next.js already includes a server like express. API Routes allow you to build a backend deployed along with the rest of the next application.
API Routes live in the /pages/api folder.
Think longterm. If in the future, it'll need to be scaled to accommodate traffic or have must separate domains then separating the backend from the frontend is the best way to go. This way each team can focus on their part without messing up the organization of the entire project. Also you have a clean interface for your clients (frontend, CLI and SDK). If not then having the backend in NextJS should be fine.

Deploying react app with nestjs server on cloud service for better SEO

I am aware that my topic is already has many answers, but I can not find what I need and want to listen to cutting edge trend.
I am building react application with create-react-app and nestjs as backend server. After deployment I found out that there is some trouble with SEO on my website and I thought my app deploying structure might be wrong.
Here is my structure.
S3 for react app hosting.
Cloudfront
Nestjs server on EC2
RDS for database
Route53
So my react app website url is https://myapp.com, server url is https://server.myapp.com. I call server apis on client by using axios with server url like https://server.myapp.com/v1/users.
I found out many people deploy there both client and server in one EC2 instance using tools like NGINX or APACHE. The reason I was not adopting these were the benefit of using cloud services was I do not have to concern about these. But after deploying applications, it seems deploying on same instance is more better is many ways.
Can I listen to some ways of structuring web app deployment with server? And is my structure is the reason of poor SEO?
It's upon to you how you want to deeply and host your frontend and backend whether on the same instance or different instances it's according to your apps traffic and whole other factors.
Now we come upon the SEO part. In your case, the first SEO factor will be the content that you are serving on the internet and another factor will be the performance of your website. The content part totally depends upon you that how you are designing it or writing the content. But there are some strategies I can share on increasing your performance so that this factor doesn't create any chaos for you.
Since your content generation is dynamic and it will generate when the user requests a particular resource from your server. So caching can help you here to optimize the initial server response time. So you can cache your content by using Nginx, varnish, or use a service like Cloudflare.

Wordpress + react serverless on same domain

I'd like to get some advice on hosting solutions for my personal projects written with react and one WordPress website. Assuming I have domain named example.com:
Show WordPress on the root level, so when someone opens example.com, WordPress renders its homepage.
React website named First is available at example.com/first.
React website Second is available at example.com/second.
React websites should be able to handle their own cookies. Is this configuration possible at all or should I just use subdomains?
I currently use DreamHost for WordPress, for react websites I intend to use AWS amplify.
The most suiting thing for this I've found so far is a reverse proxy. After a few hours, the best I could achieve with AWS amplify is that it renders reacts as root website and opens WordPress at the subdirectory like /blog, so opposite of what I want to get.
DreamHost shared hosting doesn't support reverse proxies at all.
Should I move WordPress to a VPS or a managed hosting where I have full control over .htaccess and ability to use reverse proxies? Will the server with reverse proxy be required to be powerful enough to handle traffic for all websites or routing with proxies isn't a heavy task?

How to strapi + react fullstack app on one server?

I want set up a fullstack app with strapi and react. All tutorials i've seen say to deploy frontend on netlify and backend to something like heroku. Is there a posibility to deploy full app at one hosting?
I mean user entering website will get react app and backend will be running at onother port on the same hosing
You can host both the front end(react) and backend(strapi) on heroku.
they can be hosted as two different individual apps running on different dynos and they can even be hosted as a single app together.
see this answer:
How to deploy Strapi backend and ReactJS frontend to a single Heroku app
You definitely can deploy both on the same server, the question is whether you should do that.
What if your system has another client, like mobile app? Or what if you have more than one API server, and several databases (e.g. mongo and redis)? You don't want to put all of them on a single server, do you? By deploying them separately you can benefit from horizontal scaling, i.e. you upgrade your hosting plan on particular server whenever it needs more resources, without affecting another nodes. Divide and rule!
If you still want to deploy React and back-end on the same server, the better place for that would be something like DigitalOcean. On single droplet you can place as many servers as you want and configure them to launch on different ports.

React & Laravel: split API and Frontend?

As I have learned a lot for now about React and Laravel, I can of course create a laravel app using
laravel new MyApp
and set the preset to react with
php artisan preset react
Now I can build a nice app with frontend and API.
But is this best practice? I'm wondering if it wouldn't be better to install a react app i.e. with create-react-app and seperate it from laravel as I don't need the whole view stuff in laravel.
Building with React CLI create-react-app
You can host your website with static hosting server which is far more cheaper for more traffic scenario.
Although separate php server his required to host api part with laravel but, these api can be used in mobile apps. You may host on single server with a subdomain.
SEO will be a headache. You will need a separate nodejs function to inject the seo tags or any other way.
As you frontend and backend is isolated, your system will be a bit safer from backend/admin panel vulnerabilities. You just need to secure all your apis.
Building within laravel php artisan preset react
Easy SEO part with server side rendering possible using laravel.
Single server, single domain easy to maintain.

Resources