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.
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 am researching a project for a client that needs a custom web store build. I normally work with React.js front-end and Firebase (Node.js) back-end. There is a company out there called BrightStores that allows non-coders to build and deploy web stores with a nice admin dashboard for creating many stores and products for these stores. These stores are given a subdomain by default (clientstore.myapp.com), but you can pay more for a custom domain for each store (clientstore.com). Shopify, and other service providers have similar setups. My current React.js/Firebase setup has one code base, and stores are "hosted" with React Router on separate path names (www.myapp.com/store1) for each storefront. Where do I even start researching how to build a similar system of subdomains and custom domains within apps similar to Shopify and BrightStores? Any ideas on technologies for this setup?
I need to share session between two web applications on different servers. My main web application is developed on ReactJS and some eCommerce stuff is developed on WIX. So, how can I use same session for both domains. I read lot of blogs and stackoverflow questions but not get any authentic and secure way to do that. Both web applications are hosted on different servers and using main domain i.e "example.com" and sub-domain i.e "store.example.com".
If HTML iframe is used in WIX site then session will automatically share between main domain and sub-domain. What I did for this
Created a separate component for header in ReactJs application.
Use the URL of that component in WIX site as iframe.
Sessions automatically share between for domain and sub-domain by
browser.
I have a custom website that is hosted on AWS managed using Elastic BeanStalk. The web app is built using ANgularJS framework. I have a separate blog hosted on wordpress. I would like to migrate and integrate this blog into existing website. Has anyone had experience with this? If so can i get some pointers on how to proceeed here.
Example. my custom website is mywebsite.com
Current wordpress blog is myblog.com
I want to create mywebsite.com/blog and have all my wordpress blog content integrated into mywebsite.com/blog
You can use AWS CloudFront for this. Include the Blog and the Angular App as two origins and add behaviors accordingly to route. Map your domain name to AWS CloudFront.
e.g Create a behavior for /blogpost to point to Wordpress origin. mywebsite.com/blogpost -> WordpressDNS/blogpost
If you have URL rewrite requirement, use Edge Lambda to code the URL rewrite logic.
For more details in setting up Wordpress behind CloudFront refer this blog post. In addition you will need to install a Wordpress Plugin to avoid Mixed Content issues (If you setup SSL for your website).
You have some options I can think of:
A: You could simply do a wordpress installation in the blog directory, of course needing php/mysql running on your environment.
B: You could install wordpress and use it as a back end and use Angular as your front end so that it easily integrates with your current app. The front end would consume data from the WP API.