My React is working fine on localhost.
I created the build folder and uploaded the files in it, to the free subdomain hoster "000webhost". But my App is not working there. Which folder do I have to upload? Or do I need special hosters for react?
To host the app on 000webhost, you have to turn the React app into static HTML/CSS/JS files using a build tool and upload the built HTML/CSS/JS files onto 000webhost. Building the app depends on what tool you're using; e.g. if you're using create-react-app, you can refer to this link: https://create-react-app.dev/docs/production-build/
Related
Folder structure on vs code
I have the above file structure. I have used react js inside the laravel framework combined.
It's a brand new project just with react --auth scaffolding inside the laravel project.
I can deploy just the laravel project but don't know how to deploy the react-laravel combined web app. please help
You must build project on your local machine and then upload whole project structure on server. When you build it, it will generate css and especially js files which are key files for your react part. Upload all content and it will work fine.
I have a personal website/portfolio built with ReactJS and React-Router. I want to be able to serve separately developed and built ReactJS apps as my coding demos from within my personal website (rather than provide an external link). I have used Create-React-App to bootstrap the original website app.
I have tried placing the built files (index.html and *.js files) in the public folder, which is copied to the /build folder when the app is built. However, these files are not being served.
Interestingly it was working with the React development server, but stopped working after building and serving with the npm 'serve' module.
eg. I have copied the built demo app to
/public/demo-builds/[app-name]/
and this gets copied when building the main website app as
/build/demo-builds/[app-name]/
Accessing my-domain-name.com/demo-builds/[app-name] or my-domain-name.com/demo-builds/[app-name]/index.html results in error.
Is this an issue with my overall methodology of trying to serve separate built apps within a react-router app?
Is there an accepted way to serve built React apps within a React app?
I'm working on Project using React for the frontend and Laravel for the backend using RESTfull API.
I developed each one in separate directories but now I'm trying to deploy them in the same folder I don't really know what to do.
or can I deploy then each one in their own folder? if yes how can I run them on the same server (apache)?
The directory really shouldn't matter. Since React is a frontend javascript development framework, it runs on the client while the laravel backend will run on the server itself. All you need to do is serve the entry point html and the javascript file created from your react project to the client.
I assume you're thinking about the "development server" that you run while developing the react app. You need to, depending on your build environment, do a production build and serve the files in some way to the client.
When using create react app you can use the deployment build instructions: https://facebook.github.io/create-react-app/docs/deployment
So to summarise:
Host your laravel backend on the apache server
Upload entry point html (you can serve this via laravel, create a template with the correct html)
Serve the deployment javascript file for your react app (just include it on the same html page)
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
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