I have started to learn React and now I am a bit confused about different parts of development and deployment.
Does all webpages are bild with frameworks like React or Anguler? Or they are used only for one page web applications? Can I serve React with nodejs server?
Does the method when you build static webpage with js, html, css and serving them with Apache web server is still used in modern world?
I would highly suggest using the React-Create-App utility. And yes, you can use Node.js. In fact, React doesn't force you to use any backend framework. I could pick ASP.NET MVC, Node, Spring MVC, Rails, etc.
https://github.com/facebook/create-react-app
But this tutorial will guide you through creating react apps in development and creating production builds.
When you build in production, you'll end up with a public folder with html files. But in React, you don't create html files, you create .jsx, which is a combination of html-like React tags with JavaScript. They will get transpiled to html, etc during the production build phase. You can then take the build folder and deploy it on an HTTP server, such as Apache.
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 Github repo (https://github.com/cupliz/medical-calculators) with some components (calculators) that I want to integrate into my Django app, without having to do a SPA; I want to take advantage of Django's templating system. Integrating the React app as a Django app did not succeed (I tried a dozen tutorials based on Webpack and babel). I figured out the easiest way may be exporting the react app to static HTML files. I have tried the following:
npm run build command (but this didn't work presumably because of the routing).
react-snap module
react-snapshot module
react-static module (this requires the app to be built with react static from the start).
What is the easiest way to export an existing react app, with routing, to static HTML files that can be served without any node.js on the hosting server?
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)
I have an existing MVC project built with Yii2 (a PHP framework) which generates and serves HTML pages.
I'd like to write just one complex Component (with 3rd-party modules and a lot of other dependencies) only for a page (generated by Yii2); so it's important to clarify that I don't want to leave all the frontend side to ReactJS and I don't want / can't migrate to a complete frontend app managed by ReactJS.
What's the best way to integrate ReactJS (with its stuff like npm, Webpack, etc)?
Should I write the ReactJS app in a "npm environment", bundle everything and include the "build" static resources into the Yii2-generated page?
For complex scenarios it is better to use "npm stack" to build your assets and create asset bundle to only register files generated by tools like webpack or gulp. Yii tools for compiling and compressing assets works fine for simple cases, but they're very limited when you compare it to tools from npm ecosystem.
You could look how official website of Yii Framework was build: they used yarn and gulp to build frontend assets and one simple bundle to register generated files. The main difference from normal "npm fronted flow" is that they used assets-packagist to install frontend dependencies.