I'm new to SPA development, so this may be a stupid question. please understand.
My question is "Is SPA(Single Page Application) needs a Application Server?"
As I understand it, the SPA gets the response after calling REST API. It use that response to re-render.
If so, is the server that handles REST API "Application Server"?
So many posts say Application Server are tomcat, oracle, etc... and they are also say Application Server handle the request to access the database. Then what is "Application Server" in SPA? or there are no Application Server in SPA?
(Are there any architectures or systems I'm not aware of?)
If I'm misunderstanding the architecture, please let me know.
I want to understand web server and Application Server in SPA. So I have read many posts but I'm still confused.
Thanks.
A SPA needs one server to serve the SPA bundle to the users browser.
If the SPA interacts with an API or APIs, the API(s) could be hosted on the same server that served the SPA bundle, or they could be hosted on other servers.
A Single Page App requires a server to serve the .css, index.html, and .js files it requires. It is not a requirement that that an SPA must communicate with an application server via any means at all.
Your content can be static or self generated by the app itself. Should you require communication with a backend server, you can consume that via some sort of api over
protocols such as http, https, websockets or Server Side Events.
To summarize. An SPA can be completely self contained OR access an api to provide functionality. A standalone app requires a server only to serve the component files (.css, .js, .html) of the app itself.
With SPA as well you will have html file and images, js, css files that will be loaded when you launch your single html webpage. So you need to host this static content on some server. So it can be separate web server or same APIs
server(Application Server) which can host these static content and serve request for those files. It can be also hosted on cloud static server and distributed via CDN
Short answer:
Yes. SPA apps do need to live somewhere (as you need to host the assets (js, css, initial html, other)
Long Answer:
You need to setup somewhere to host the entry files as per the short answer. In the past I've used anything from:
NodeJS code base services running on a Docker container (app & assets being served via express), to
dotnetcore on a similar stack (With kestrel server serving the assets running on docker on ec2).
Docker container running Apache webserver hosting the statically compiled assets
More recently I've dabbled with compiling the SPA app to a bunch of static assets (such as the ability NextJS / Gatsby provides with their tooling, but there are tons of others or alternatives in other SPA worlds)... but even then you'll need to host those assets somewhere.
S3 on Amazon has the ability to host SPA apps directly via a bucket setting & providing an entry point
Vercel (...or any other SaaS alternatives, Vercel is just where I host my personal stuff and has been easy to get going)
Again it's all up to you, but yes, you still need to make the JavaScript available somehow, you just need to pick your mechanic. SaaS with a baked in WebServer such as Vercel, a CDN like S3 that AWS provides, or go totally custom and spin up your own WebServer as application entry.
Related
I want to make a website using nextjs. I want to know what is the best way to host it without hurting seo. Let's say that my domain is 'www.myDomain.com'
I have domain on my shared hosting. I can
host nextjs app in vercel and point to the domain in my shared hosting
copy nextjs build folder to shared hosting
Website should be rendered on server and come to the client unlike react which loads content on the clients browser. It is important for seo.
does the second option(copying build folder) renders on server or it works like a react app that load all the content on clients browser?
Next.js by default pre-renders html unless you opt for client side rendering logic. So no matter where you host, it's based on your choice of rendering.
Client side rendering is not best for SEO.
As for hosting,
If your shared hosting supports nodejs you can host your site there itself otherwise hosting on vercel is your best option.
Just copying build won't work as you will need to run npm run start to start your next server
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.
I tried to deploy my single page application with spring boot and react.js. but I don't know where to start. I did my research and EC2 and S3 would be the right setup for deploying spa but I'm not quite sure. is there any resource I could have?
There are so many way to do this.
But I would use AWS CloudFront, and have the EC2 as a source (could also have the EC2 behind application load balancer) and the react.js in an S3 as a source. This way you also get them under a common domain name, and you can easily enforce HTTPS.
I’m new and learning how to deploy to AWS.
I made angular JS website and tried to deploy it at localhost with node.js npm/bower. It’s worked. I tried to deploy it at MS Azure: deployed it from Github and it’s worked as well well (I did not do anything in setting and did not install node.js, but maybe Azure did it automatically?).
The last, I tried to upload it at AWS S3 bucket as a static webpage with allowing public access. It wasn’t work property: I can only see my index.html content but no routing content: so basically almost nothing of my webpage.
I saw a similar question (“How do I set up an AngularJS app using AWS?”) where a person was wonder about options to upload an AngularJS to S3 bucket or EC2. The answer says that one can use S3 at AWS if it's angular js static webpage. The person of that question went for EC2 option. If I’ll go for S3 option: I’m confuse: what is “static Angular js page” actually? will routing work at S3 or I must use EC2 with node.js?
First, you should really do a simple search and read the differences between static and dynamic webpages.
If you are using some sort of server-side technology like NodeJS, Java, Python, Ruby, etc. to generate the HTML for your web pages whenever a request is made then you have a dynamic webpage and you would need to host that on EC2.
If your webpage is simply HTML, CSS and JavaScript files, and the raw content of those files does not changes with each request then you have a static webpage, which can be hosted on S3. The advantages of a static webpage is that it is much cheaper to host, and when hosted somewhere like S3 it can handle massive amounts of traffic without any extra configuration or management on your part.
In your case I believe you are only using NodeJS as a script that you run once to generate/output your static AngularJS content. If that's the case then you have a static website. If however you are also using NodeJS as a server to handle HTTP requests dynamically then you have a dynamic website.
AngularJS is a client-side technology. AngularJS runs entirely in the browser. As such you should be able to host your AngularJS application on S3.
Since AngularJS routing works entirely on the browser side, it shouldn't matter where the page is hosted. You should expect it to work if the page is hosted in S3, since it actually runs in the browser, not the server.
What is “static Angular js page” actually?
Static AngularJS refers to the frontend content such as HTML, JS, CSS, Images & etc. You should be able to implement routing for static content from S3.
Will routing work at S3 or I must use EC2 with Node.js?
If you can separate the AngularJS App Static Content and Backend Code (e.g NodeJS Server Logic with Database access & etc.) then you can host, the AngularJS App in S3 and use EC2 for backend. This can get challenging to setup. To route both to the Frontend in S3 and to the NodeJS backend, in addition you can use AWS CloudFront.
However, since you are new to AWS, it would be better to use either AWS Elastic Beanstalk or EC2 with NodeJS i n the beginning for deployment.
Up until recently, I've been hosting my dev app on a single heroku instance. The API and the angular app are hosted from the same Express.js server. Along with a front-facing sales page, separate from the angular app, sitting at the base domain. It's time for production, so I need to split the two into the api server and any other service to host the static pages.
My Current Setup all on an express.js server
mydomain.com --> Sales Page, static simple page with bower deps
mydomain.com/api --> api
mydomain.com/anything else --> Angular App
mydomain.com/assets -> images and misc files
I would love to use a service like Amazon S3, Cloudfront, or Divshot to host #1, #3, and #4 on a CDN service. And keep the API (#2) on Heroku or AWS ec2.
Right now, my only thought is that I'd have to run a separate server myself and host the static files with Nginx, apache, or express.js to allow for the routing based on url because as far as I can find, the CDN services don't allow for .htaccess redirecting and such.
Thank you for the time.
To simplify, you only have 2 categories here:
Static: Sales, Angular, Assets
Dynamic: API
You should consider exposing all your static assets under mydomain.com/* hosted from whatever CDN, and have the dynamic stuff being served from your (probably AWS) instance # api.mydomain.com
It is not the exact layout that you had in mind, but that one is trivial to setup.
The only minor addition here, is that you might need to setup CORS due to the double domains.