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)
Related
I need to deploy react UI application along with my backend rest APIs on weblogic server.
How do I achieve this scenario?
You can package your react app in a jar file and put all the static resources (index.html, javascript, css, etc) under the META-INF/resources/frontend folder of that jar file. You can then add that jar file as a dependency of the war file that contains your backend rest apis. Then when you enter <context_path>/frontend/index.html in a browser, it should serve your reactjs app.
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 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.
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
I'm new to Spring and AngularJS. I followed the steps here to build the back end restful API, and it sends Json upon requests. So, according to the guide, When I run "mvn spring-boot:run" the tomcat server starts at localhost:8080.
Then I used Yeoman angular generator to build my angular app. And when I run "grunt serve" inside my angular app, the front end app runs at localhost:9000.
What should I do so that my angular app can be served together with my Springboot tomcat server on the same domain, say, localhost:8080 ?
Is there a sample project that I can follow? I found the following projects, but still cannot make it work as I don't have much background on tomcat.
https://github.com/robharrop/spring-angularjs
https://github.com/GermanoGiudici/angularjs-maven-tomcat-seed
https://github.com/xvitcoder/spring-mvc-angularjs
You need to take either:
the built files (grunt build then basically everything in the dist/ directory)
the raw files (your index.html and all JS as-is)
and copy them into one of the following folders (I recommend /public/): http://spring.io/blog/2013/12/19/serving-static-web-content-with-spring-boot
Spring Boot will automatically add static web resources located within any of the following directories:
/META-INF/resources/
/resources/
/static/
/public/
This means that not only does Spring Boot offer a simple approach to building Java or Groovy apps, you can also use it to easily deploy client-side JavaScript code and test it within a real web server environment!
This is going to be a pain for development however since you will have to re-copy the files every time you make a change for the front end. For production your goal should be to deploy a versioned copy of the built files with your spring app.
For development you might want to consider letting grunt serve the Angular content and running both Tomcat and your grunt server (is it node?) and enabling cross origin requests between your front end and back end. OR you could just copy the whole angular directory into one of the above directories but that is a short term approach.