Share session between ReactJS and WIX web application on different servers - reactjs

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.

Related

Is Single Page Application needs a Application Server?

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.

One React app, multiple domains / subdomains

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?

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?

Responsive website into app or Hybrid mobile app?

So after too many searches I decided to ask this question.
First of all I'm building a mobile app using angularjs in my website (Online) not localhost. The app is a kind of a CRM based (CRUD mostly).
I have the cordova mobile application ready. I have a few questions here.
Is it acceptable, if I use the website URL directly in the inappbrowser URL (Like an iframe)?
Or. Should I need to put the angularjs files inside the www directory of the cordova app and access the server functions via API?
Which way is preferable? Why?
Will there be any performance differences?
If the No.1 is not a best practice, what is the major drawback on using the inappbrowser?
You can build Hosted Web App in an Apache Cordova:
For this scenario, you use a thin Cordova client (think of it as a web
browser embedded in a native app) that automatically redirects to your
Web site.
See also: Wrapping an existing web application in Cordova.
Other option: PWA.
From Wiki:
Progressive web applications (PWAs) are web applications that load
like regular web pages or websites but can offer the user
functionality such as working offline, push notifications, and device
hardware access traditionally available only to native applications.
PWAs combine the flexibility of the web with the experience of a
native application.

API REST to be used for an angular application and a mobile application

I'm building a REST APIs in Symfony2. The idea is to use these apis from a angular web app and a mobile app. Authentication is required to use the APIs.
I thought in the following possibilites:
Separate Symfony and angular in diferent projects:
The URLs under /api would use OAuth2 to authenticate user (FOSOAuthServerBundle). Both web and mobile app would need to use an access token.
Include angular inside Symfony: In the web app the users are authenticated using a symfony form, and therefore no need to protect the urls under /api with OAuth2. But how would authenticate users from the mobile app?
Please, any help is good!
In short, what I need is that the APIs can be used from two clients: web app and mobile app
Thanks!
I'm currently studying and suffering from the same problem and so far the best option I've seen is to keep the projects separate. If you include angularJS in your Symphony project, you will end up using resources that Symphony provides that you won't be able to replicate in the mobile structure. By detaching the server with the client completely, your Web App built only with Angular will be more similar to your mobile app, mimicking the stand-alone application mode.
Personally, I chose JWT Auth since it doesn't require 12 tables in your database, but using OAuth2 would have similar result.
Is always better to choose some solution that is already tested for many people and is used by them. So, I think is better you to use the OAuth technique, so you can consume your api from mobile, web and every other technology.
If you will join the API and WEBApp is up to you. because REST use no session and every call is a new call that you need to check and block or respond. I have an app that has an Codeigniter API and an AngularJS APP in the same project, but thoose does not share any exclusive thing as sessions.
I built e-commerce with FOSRestBundle, HWIOOauthBundle and FOSUserBundle
From server side, generate accesstoken and authenticate via api/login/ api/login_check/
write your security.yml routing access
From client side, call your api. It should render 200 or 403 HTTP_Code.

Resources