I have a WordPress application in htdocs folder in Xampp and a separated Next.js application running in localhost:3000.
Usually WordPress takes a theme installed and you can navigate the site at http://yourdomain.com. On the other hand the admin UI can be accessed from http://yourdomain.com/wp-admin.
My question is the following, how can I replace the twentytwentyone theme with my Next.js application that uses GraphQL to request data from WordPress endpoint and make it as a root path, in other words http://yourdomain.com must load the Next.js application but also http://yourdomain.com/wp-admin must be the WordPress admin UI. (Without a theme).
If this isn't the ideal thing to do, and both WordPress and Next.js application should be deployed separately, how can I use WordPress only for admin UI and cancel any other rendering that's coming from WordPress, like the default page that uses twentytwentyone theme and make WordPress only as an API endpoint ?
Thanks in advance.
I have completed a similar thing.
The easiest way I found to achieve this was to install wordpress on a subdomain.
http://admin.yourdomain.com
I then ran the next application on
http://yourdomain.com
This way your next application can pull information from the wordpress API at http://admin.yourdomain.com
and you can redirect the home page of the wordpress application to http://admin.yourdomain.com to http://admin.yourdomain.com/wp-admin
This means anyone accessing the wordpress site will be automatically redirected to the admin login, whilst the wordpress API can function normally.
Related
UI PROJECT ENVIRONMENT: ASP.NET CORE MVC
UI PROJECT TYPE: ASP.NET CORE + REACT APPLICATION
ERROR NAME/ FORUM TITLE:
ASP.NET CORE MVC REACT PROJECT: System.InvalidOperationException: SPA default page middleware failed to return default page '/index.html' because it was not found and no other middleware was processing the request
ERROR DETAIL:
I have a React project created with ASP.NET CORE MVC template.
This React UI project takes data from a separate ASP.NET CORE MVC based WEB API project and projects customer data to the screen.
Authentication, Authorization and Data retrieval operations are provided via API.
While connecting to a user UI page, LDAP authorizations are checked from the relevant API. UI page opens if LDAP authorization is available.
If the user does not have LDAP authorization, the screen will display You Are Not Authorized.
These React-based Web UI and Web API pages run on IIS on Windows server.
In addition, both UI and API are installed on three servers named S1, S2 and S3 and work over Load Balancer.
90% of users have direct access to the relevant UI. Some can log in from S1, some from S2, some from S3 server with Load Balancer management.
However, some users encounter the following error when opening the relevant UI page.
We detected this error on Dynatrace.
Error :
REACT The SPA default page middleware could not return the default page '/index.html' because it was not found, and no other middleware handled the request. Your application is running in Production mode, so make sure it has been published, or that you have built your SPA manually. Alternatively you may wish to switch to the Development environment.
We couldn't figure out why some users are getting this error even though most users access the same page.
What do you think could be the reasons for the access problem?
These React-based Web UI and Web API pages run on IIS on Windows server.
In addition, both UI and API are installed on three servers named S1, S2 and S3 and work over Load Balancer.
90% of users have direct access to the relevant UI. Some can log in from S1, some from S2, some from S3 server with Load Balancer management.
However, some users encounter the following error when opening the relevant UI page.
I expect for my React UI page to open for users with errors.
I think I already know why.
Your three node server environment, the value of ASPNETCORE_ENVIRONMENT may be Development and some Production, so the Development node server are running normally.
How to check it?
You can check your ApplicationHost.config file, or check this blog.
Solution
Make sure your node server is Production.
Use PublishRunWebpack to deploy react project into wwwroot
I am utterly confused about which platform configurations to use under Azure AD app's Authentication blade.
There are 2 platform configurations I am confused about:
"Web"
"Single-page application"
The app I have registered is a React JS app, which in my mind, is both a Web app AND a SPA.
This "rabbit hole" get's deeper as I'm trying to configure redirect URIs so i can use MSAL.js to authenticate and authorize within the app.
Essentially, it comes down to this (for my http://localhost:5000 development environment):
If I specify my URI under Web, then I get error:
AADSTS9002326: Cross-origin token redemption is permitted only for the 'Single-Page Application' client-type.
And from what ive been reading, Web platform is the way to go (not SPA).
Can somebody shed any light onto this convoluted area?
Which platform configuration should I be using for a ReactJS app?
Thank you.
• React js is mostly used to develop SPA (single page application) as it is a web application or website that interacts with the web browser by dynamically rewriting the current web page with new data from the web server, instead of the default method of the browser loading entire new pages. This means that the URL of your website will not change completely (page will not reload), instead it will keep getting content and rewriting the DOM with it instead of loading a new page. The goal is faster transitions that make the website feel more like a native app.
• When building you react-app, you can see that there is only one App.js from where your entire web-app is loaded in fragments and components. This behaviour of rendering components and pages on a single page and changing the DOM (is a single page behaviour and hence the name), instead of loading a new page with new content, this makes it feel like a single application.
• So, when you are using react js as a building code platform, I would suggest you use SPA as the platform in Azure AD app registration. That does not mean you cannot use react js to create an app on a remote web server and deploy it, you can but for hosting react js coded application script and running it as a worker process and provide a desirable output you need script execution backend runtime like ‘ngrok’ and ‘node.js’ to supplement the execution and provide compatibility with the web server environment.
Please refer below links for more information: -
Why is React Js called as Single Page Application
https://learn.microsoft.com/en-us/answers/questions/315313/azure-app-registration-causing-the-following-error.html
I built a website with reactjs and the client wants that the web automatically creates a link on the phone home screen that opens chrome to the specific url of my website.
Is this possible without wrapping the reactjs with another framework like Cordoba, Ionic or React Native?
Thank you so much
A web application has no access to the device's internal APIs. Web applications are naturally subject to the browser's features, restrictions and limitations in which it is running on. Even native applications has to request access from the user to have such permissions. What your client asks is, regretably, impossible.
I agree with the above answer by #Lux Ilustre. You can't add the application link to the phones homepage without the users permission. But it is possible to make your website installable with a PWA. You can create a PWA with a manifest file and a service-worker file which makes possible to install the website to the users phone and load assets from cache which makes it possible to make some parts of your website function offline.
I am trying to alert users when there is a new version deployed in my react app. Here I am using webpack to bundle our modular application which yields a deployable /dist directory. Once the contents of /dist have been deployed to a server, clients (typically browsers) will hit that server to grab the site and its assets. I am using caching techniques as mentioned in https://webpack.js.org/guides/caching/ and for each deployment, I am getting new content hash id.
I need something similar to the below screenshot where the user gets a notification to refresh the page. Is there any way you guys can help me out in this?
I have an application which has a landing page developed using AngularJS. The login screen is developed using AngularJS and when the user logs in, the token should be saved in local storage and go to the landing page.In that Landing page there is a button. When I press that button the page should route to a page which is developed using ReactJS which runs on a different server running in a different port .
(Eg. React app in port 3000 and Angular port is 4000)
When the page is redirected to the ReactJS page, that page should be able to access that user token which we previously saved in local storage . Also I want to know the security aspect of saving the token in local storage and is there any other alternatives to do that.
OK.. not sure if this will suffice as an answer, but why do you want it to run on two separate ports? I have worked on such a project and in my case it was like this..
MYAPP/landing - developed in angular
MYAPP/dashboard - developed in react
so, basically I have the React prod build in one of my subdirectories and the Angular prod build in the rootDirectory and had configured in my server config files to handle the requests accordingly(I used apache websever)..