how to deploy a react app bundled with webpack on EC2 - reactjs

I have built an Application using react and I want to deploy it on my EC2 instance. I have bundled it using webpack and I was using webpack-dev-server for development purposes. The bundler has produced an output with public directory and index.js as the output of my code. I have included this index.js in my index.html and now I want to deploy it on my EC2 instance. Is there any specific http server which I can use to deploy this app. I am new to web application development so any suggestions will be appreciated.

Related

How to build react app for production without making the website offline?

Is it possible to build react app for production using npm run build without it making the site offline? I am using nginx to serve the react app and when I run the above command, I get Internal server error until the build is finished. It would be nice if the old version of the app is served until the build is finished.
You shouldn't be building your application on the production server. Build it locally, then deploy it to production and this won't be an issue.

How to Deploy React app on Regular server without build command

I want to Deploy my react site to the regular server without build command
without Netlify or DigitalOcean, Heroku, GitHub Pages, aws
Is there a way to run modular bundlers like Webpack on Host?
actually what Netlify or DigitalOcean, Heroku, GitHub Pages, aws doing for show webpage without npm run build command?

React App Hosting - Host Prerequisites

Generic: What kind of services must a hosting vendor provide in order to make it possible to have a React app hosted?
More Specific: If I create a website with React and React Router, is it possible to deploy it by just uploading the bundled output folder? This could be for example a dist folder containing index.html, bundle.js and an images folder.
Could this be as simple as deploying a simple web page (like one built with plain HTML, CSS and JS)?
Sure just do: npm run build
and you will have a folder with the static files. Upload those with your choice of file transfer method and set the permissions to the web host appropriately.
100% Working Example.
React App Hosting in Firebase .
You can read this blog
Host Your React Web App in few minutes.
Command runnning in Wrong sequence =>
firebase login
firbase init
firebase deploy
npm run build
Command runnning in Correct sequence =>
firebase login
firbase init
npm run build
firebase deploy

Express JS serve react js files

I have an express js backend and a react js frontend.
Now i want to serve this as one project.
Is it possible to build a task with webpack, grunt etc. to build the react js first and then move the build to the public folder in express js?
There is! You can serve your static client files (your react app) from your server. I would suggest checking out this article if you want to know how to do so https://originmaster.com/running-create-react-app-and-express-crae-on-heroku-c39a39fe7851
Yes you can. You need to make a production build which will place all files in a directory; let's say "dist" directory. Now you can run express server or any other server (lite-server suggested) and set base directory as "dist" which will run index.html by default and your app will be running in production mode.
You can read official article from Facebook here :
https://reactjs.org/docs/optimizing-performance.html

React app using webpack to be deployed on JBOSS

Any idea how to deploy a React app or angular app to JBOSS webserver ?
I was working on a POC project using React and webpack-dev-server and now I have a bundle.js. Is it possible to deploy the bundle.js under a JBOSS directory (webapp.war)
Or will I need somehow run my react application on a separate server and port using npm/node/express and then somehow redirect JBOSS requests to this url ?
Please help.

Resources