how to Deploy of node js react app in a single folder? - node.js

I have a MERN project in a single folder. means first I created a node.js backend with index.js file and then for frontend I created a SRC folder in same directory and write react code so now I want to deploy it to aws. but most of tutorials I have seen have two folders and then they connect it using proxy etc. so can I still deploy it using one folder?

Related

Deploy react node application on shared hosting

I am trying to deploy my react node application using shared hosting and I am getting a blank page. All the solutions found are not working
Here's how my folder structure is in my cpanel's file manager;
in the public-html folder, I have everything that was in the build folder(static files and an index.html file)
I also have another folder where I have my server application and this is how I am trying to serve the static files :
app.use(express.static(path.resolve(__dirname, '../client/build')));
app.use('/public',express.static(path.join(__dirname,'../client/public')))
I am assuming here is where the problem is but I have never done this before so can't figure out
Any help will be greatly appreciated

trouble deploying full stack application on heroku

I have made a full-stack app with react js and node js with express and MongoDB but I am having a little bit of difficulty deploying I first tried to deploy the front end but I was getting the invalid host header coming up when I tried to deploy in Heroku its been tested and works fine in the dev environment.
But also my application has two separate git repos one for the back and one for the front end and every tutorial I have seen to deploy they always have the client in the same folder as the server.
Can someone either tell me how to deploy or point me in the right direction on how to deploy.
What you have to do for React/Express/Node/MongoDB is,
build your frontend app first by using "npm run build". This will create a build folder under your app folder.
move your "build" folder to backend app folder.
update your backend app to use "app.use(express.static('build'))".
Then you can push your code to git and Heroku and try to deploy it.
There should be some tutorials available on Heroku website.

How to create dist for on node js application

I have created an application in node js with express framework. And need to deploy it on production server.
But don't want to deploy whole project on the server because security purpose. I want to create minified dist directory and deploy it on the production.
Is their any approach available to achieve this.
You have to upload express server and related route files on server.
As express run directly by node.js. you don't have to minify it.
By default express block access to other files which is not used for server.
You can allow access to other files like index.html based on link here
I guess what you're looking for a packager. You can try Parcel JS to bundle your project.

How should I deploy Angular + NodeJS project on a server?

I have an Angular project with NodeJS backend. I am confused about how to deploy my project on a remote server? I decided to use webpack because of it's simplicity, so I ran the following command:
ng build --prod
And it made a folder called dist for me. I think I must copy the content of this folder into the public folder of my NodeJS backedn server, but I am not really sure if I do the right thing?
Should I change other configuration of my frontend or backend codes too? Or just copying dist folder into the server's public folder should solve everything?
You have a very good documentation guide by Angular: https://angular.io/guide/deployment
And yes, you should copy dist/yourproyect (Angular compiled to HTML+CSS+JavaScript+Assets) to any web server you want to deploy it.
For isolation purposes (and maybe configuration), I'd recommend to put front and back in different folders. But you can deploy it within NodeJS.
In short: A web server Apache/Nginx/IIS/GitHubPages/Firebase/etc for Angular and PM2 ( https://pm2.keymetrics.io/ ) to launch your NodeJS. But depending on your expected load, you may want to choose one server type or another.
Anyway, if you specifically want to serve Angular through NodeJS, I'd recommend this tutorial (2016, maybe bit outdated, but it will help): https://scotch.io/tutorials/mean-app-with-angular-2-and-the-angular-cli

How to deploy ReactJS frontend and NodeJS/Express backend from the same project folder?

GitHub repo: https://github.com/byeung2019/MIQSTechnologies
Hey guys,
This is my first time deploying a website online, so I'm confused and anxious of where to even begin.
My frontend is built using ReactJS, and my backend uses NodeJS/Express/GraphQL to fetch data from an external API (CryptoCompare).
My website works locally.
My frontend and backend each has its own unique package.json and .env file with its respective dependencies and dev dependencies.
Through my research it's been recommended to host the frontend using Netlify, and the backend with Heroku.
However, since this is my first time deploying, I'm confused about the following:
How to deploy the frontend and backend separately from the same project folder, with them having their own respective package.json file.
Would I need to rewrite code in index.js within the backend folder in order to connect my frontend GraphQL requests to my backend.
Thank you so much!
First of all this is a complicated question to provide an exact answer, you will have to google and learn few things. But here is a high level idea.
After developing any app using react or angularjs you can follow the build instructions and build the app. It is ng build --prod in angular for example. Then you just need the build to deploy and it does not depend on package.json
You have to deploy your backend app as it is and there is few options then you can follow most common is,
Using a proxy like nginx
Host your build inside the node backend
Here is a guide how to host your apps using nginx for nodejs and angular
https://www.journaldev.com/27234/nginx-reverse-proxy-node-angular
Hope you will get the idea.

Resources