deploy angular/Nodejs Application in heroku - node.js

I have separte angular folder and a seperate Nodejs folder for the application.
I want to deploy it in heroku but apparently ondly a nodejs app can be deployed. Is there a solution to deploy my angular/nodejs app?
Otherwise does anyone have an idea on how to combine the angular project folder inside the nodejs project folder ?

You can serve your angular app as a static content on your node js app.
This depend how your node app is built, for example with express you can just put the files in the public directory.

Related

How to deploy react app with node server?

Up untill now i've been deploying react apps to my host..
I just uploaded the BUILD folder and it worked perfectly.
What about if I have a nodeJS server? how can I tell react to deploy it with the server?

How to deploy React and Node.js on cPanel

I am asking here because I have no idea what to do anymore. I want to deploy my React app that uses Nodejs as a server and I cannot find a proper article or forum to help me. They all only talk about how to setup Nodejs or how to setup React. Nothing on how to setup both at the same time. This is my first React project with Nodejs.
I am trying to deploy my React app using a Node.js as a server onto cPanel on my domain. When adding my React build folder to public_html then the front end is good and obviously Node is not working when I try to use the backend functionalities. When I go and setup a Node.js App in my cPanel I cannot get the js script to point to server/index.js, it only selects index.js in the root. Check image below:
I point my index.js with my server config to server/index.js in my Application startup file but it keeps going to the index.js in the app, not server/index.js.
My directory is as follows:
-app
-build
-node_modules
-public
-server
-index.js (must use this one)
-src
-.env
-package.json
-index.js (keeps using this one)
How can I deploy my React app with Node server using cPanel? Please help.

Index.html is missing while generating reactjs build. How can we deploy react and nodejs project to production?

I have created my project with Create React App and for a server using nodeJs but when deploying to production, the file index.html is missing in build folder. I've checked the public folder and the template of index.html is still there.
Refer to react-create-app documentation. Creating a production build
When running in development mode, create-react-app spins up a server that serves everything from the public folder.
Thus, in production, your express app also needs to serve everything from the public folder.
server.use(express.static("public"));

Heroku deployment confusion: Vue.js frontend with Flask backend

I currently a web app involving a Vue.js frontend with a Flask backend acting as a REST API. They are divided into the client and server folders in my repo, respectively. I am looking to deploy it to Heroku via the Github deployment feature but am running into some errors and questions I need clarified.
All code can be found in this Github Repo: https://github.com/justintranjt/thrive-test
In development, I have been running the application like so:
In one terminal run thriveApp.py. In another terminal run npm run dev. Navigate to localhost:8080 which is the local server running
the Vue.js application.
Is this how the application will be run on Heroku? Or is the Vue application run using npm run build? In that case I would have to take the produced build folder and serve it in the Flask application, correct?
In addition, some of my links between the frontend and backend specify localhost:8080 and localhost:5000 (8080 is Vue and 5000 is Flask) which work locally. But will this work when deployed to Heroku?
<b-form>
<b-button variant="primary" href="http://localhost:5000/loginPage">Login via CAS</b-button>
</b-form>
As you can see here, I have a button in my Vue application that links to a login page routed by my Flask application. Will I have to change the portion of the URL that says localhost:5000 when running on Heroku?
Finally, When I currently try to build the application on Heroku only the Python portion of the code is recognized as modules from the Vue app specified by package.json are not installed while plugins for Python specified by requirements.txt ARE installed by Heroku.
I have a feeling all of these questions are generally related to each other. Any other advice or tips regarding Heroku deployment would also be helpful as I'm quite confused about deployment at the moment.
Is this how the application will be run on Heroku?
No! npm run dev spins up an entire development server with vue in dev mode and hot reloading. That's a lot of overhead, especially when it comes to file sizes.
Or is the Vue application run using npm run build?
Kind of. Vue doesn't need to run on your server at all, it's all client-side. npm run build bundles and minifies your files to a dist folder, you'll be left with only html, css and javascript - this is all of the frontend code that needs to be on your production environment - no need to deploy any of the source files. All you need to do is serve those static files from any server. This could be done by your flask, or just any apache, nginx etc.
But will this work when deployed to Heroku?
That will be very tricky to setup. It's one of the reasons why I would not deploy front- and backend on the same (virtual) server.
modules from the Vue app specified by package.json are not installed
If you deploy your bundled frontend instead of the source code this wont be an issue anymore. I still recommend serving the frontend from a different environment.

angular2 fullstack app with nodejs backend server in one project

Just trying to figure out whats the best way to build an angular 2 fullstack app, where the nodejs server is serving a rest/graphql endpoint on the one hand and on the other hand the angular 2 app. I'd like to build on a structure which in future will also allow server side rendering.
Are there any best practices for this?
My idea so far is to have the nodejs as backend app also serving the angular 2 app. However this seems not night.
.
/src # node server src code
/node_modules # npm installed libs for node server
/public/ # angular 2 app
node_modules/ # npm installed libs for angular 2 app
app/ # angular 2 application code
index.html
app.js
However I'm not sure if this is a good practise? How would you handle this with npm? Just init two projects and install dependencies either in the root directory or the public directory?
Is there any better solution for this like building the angular app into the public folder and only serve the builded app?
I would build 2 different project (and 2 repos if using Git)
One for the backend api (nodeJS / Express / DB /...)
And the other one in the front using nodeJS also for the server side rendering and for serving the index.html

Resources