Create a part of `Express` Web application as an `Angular` app - node.js

In the past few weeks I've setup a small website using Node and Express. The routing is done via express and the website consists of the root route as (http://localhost:3000/) and some sub routes like /contact or /login and so on.
Now I want to create an angular app as a part of that express app. So I want to create that angular app running on the sub-route (localhost:3000/dashboard) of the whole website.
How can that be done and solved?
The routes of the angular app should be managed either by the Express app or the Angular app?
Hope anyone can help me.

Related

Angular Universal not starting on Phusion Passenger Node Server

I have an Angular Universal Project, deployed on a node server. I built it then deployed the content of dist folder to my server. Browser folder is reached, so I get the index.html page. But API calls return timeout, and when I refresh a page with any other route, it also returns a timeout.
I think that my express server is not started.
Anyone has an idea?

How to deploy whole Wordpress app in Nuxt app?

Is there any possibiliy to deploy full wordpress app in Nuxt app? I mean I want to have adress foo.com of my app and on foo.com/bar will be wordpress app. Is there any way to do this? Nuxt router will be able to deal with this?
Wordpress API and iframe aren't answers, which I look for. As I said i want to deploy whole wordpress on specific adress of my Nuxt app.
A bit of background
NuxtJS (build as static) is a client side app.
WordPress is a PHP server side app
A wordpress site usually get served to users by web servers like apache or nginx.
Client side apps served by any web server (including apache or nginx)
So you can't "deploy wordpress in nuxt", but it is simple to get what you want:
Follow this guide to move the wordpress to a subdirectory
Upload the nuxt app to the root directory
In case you are using SSR or any other requirements that force you to use Nuxt in server mode, your options are:
Setup nginx as reverse proxy
Setup apache as reverse proxy
Setup a proxy in the node server itself, maybe this project could help
I think there may be a problem with this without the wordpress API, but the question is, do you care about Nuxt.js or maybe just Vue is enough? Remember that in Vue 2 you can use an inline-template, thanks to which you can render elements on the server side. For this you will add the necessary elements from the Vue ecosystem, such as a router and setup you will have similar to Nuxt.js.
Example code:
<div is="navbar-dropdown" inline-template>
<div v-cloak :class="isOpenDropdown ? 'visible opacity-1 mt-0' : 'invisible opacity-0 mt-10'">
<?php get_search_form(); ?>
</div>
</div>

I've deployed a nodejs api to Heroku and a React app to my personal site and I'm getting cors errors but going to the api url directly gets response?

I've written a NodeJs app with an express server that runs fine on heroku. From my local machine, with the proxy set in package.json of my React app, I can interact with the API. From the browser I can also interact with it. However the deployed React app on my site can't get the resources. Heroku is picking up the GET requests by the way.
I'm not very well versed in Dev ops, networking, deployment so I'm wondering where in the system I'm running into the problem and where I should look to fix the problem.
Edit:
I've added the cors npm package. I can make fetch requests from the browser. But my site can't...
Def sounds like a cross origin error! The browser is masking error details from react for security purposes. Try adding npm install cors & then add it as middleware - you can view the npm package here

How to render some routes and serve a SPA from a CDN on another route with Express

I am using node.js and express to render some pages like home pages and some other SEO routes.
For a specific route I want to serve a react SPA which I host on a CDN.
on that page I load the main.js from the cdn, but it is trying to load the rest of the assets from the node server, not the CDN.
One solution is to serve the SPA from node, but I know serving assets from node on production is not the best practice.
So how do I render some routes locally with node, and proxy another to a SPA application?
Do I need a third server for reverse proxy?
Thank you!

How to serve frontend and backoffice with a NodeJS application on Heroku?

I am using Nodejs with AngularJS for my backoffice application.
It stays on
http://localhost:3000/#!/
But what I need is, this url points to my frontend, and a subdomain like
http://backoffice.localhost:3000/#!/
opens my backoffice.
I tried some nodejs libraries like subomain, but I couldn't target the static files.
What is the best approach?

Resources