Develop React w/ full-stack (WAMP) locally - javascript

Is there any way to setup local development environment with React at front-end and a full-stack server (e.g. WAMP)?
The perfect case is to:
Use the default React Create App setup without ejecting scripts
Make AJAX calls to PHP files which will handle the queries to MySQL database
Questions:
Is it possible to just run WAMP at localhost:3000 and React yarn start at localhost:3002 (it auto-sets different IP) and then just put PHP files somewhere inside src folder and call them from JSX using one of the AJAX technologies (e.g. jQuery or native XMLHttpRequest)?
Or the only way is to eject the scripts and then build and put files inside WAMP's /www/project folder and then use custom tools to update all this stuff at WAMP's localhost address?
EDIT: putting react app into /wamp/www is not an option - it didn' work for me and I don't want to put more efforts into it. Running React and WAMP in on localhost seems to work, the question to answer is:
How to import the PHP file into JSX. Trying to call it with smth like: require('./foo.php') does not work. import foo from ./foo.php didn't work either. Anly ideas?

After investigation I have found a way to achieve my goal.
The key to be able to send request to any local server you use (Apache, Nginx, Node.js) it to use ReactJS proxy feature:
https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#proxying-api-requests-in-development
After adding "proxy": "http://localhost" to my package.json file I was able to send and receive requests to my WAMP server while keeping all React's Create App native scripts.
P.S. It turned out Facebook has a nice React-native tool for request called fetch - https://facebook.github.io/react-native/docs/network.html.

1) I strongly recommend you do try to do this :
Separation of concerns is very important. having two repositories for your application, one for the backend and one for the front end is very important. Especially if you are using a versioning system, and more importantly, if you plan on working on it in a team. I suggest you just have your wamp installation stay where it is, add a Vhost like : backend.my-project.com, and then run your react app normally, and use the env.local in cra file to store the URL of your backend app using the environment variables.
2) You do not need to eject scripts to have both your frontend and backend in the same place :
Either create-react-app inside your wamp folder, or point your wamp folder to your create-reac-app generated react app

Related

Where should I put the frontend server code in app created with create-react-app?

I created an app with create-react-app and I'd like to log something in its server console. How could I do this?
I've tried adding index.js to the root folder and creating server folder, but it doesn't work.
Edit: I don't mean the backend server here, but just the frontend server. I'd like to print something in the same console where I type npm start. Is it possible?
If I understand correctly to do such a thing you should do eject your create-react-app otherwise you won't be able to modify the build scripts.
After the eject you can modify the webpack script or any other script you need to.
If you decide to do it, be careful because it will be more difficult to update your build dependencies.
First, you cannot put your backend code in the frontend code. Because the backend code is run by Node.JS enabled server. But the front end code is run by your browser.
All the react code will be bundled into one js file, which will be loaded by the browser. It will be simple JS files that renders views.
When you see localhost:3000 the server is given to you by default to VIEW and LOAD your front-end code. Most of the times it is webpack-dev-server.
The common options are:
1) If backend is REST/SOAP api then use XHR/ajax to hit the api. You just have to put the react generated JS file to your backend server's public folder. Also you can use completely different repos/codebases too in this approach.
2) You can use Server side rendering of sort where you put front end code in your backend views.

Create React App: serve html in development

Integrating a server (say in Python or Java) with CRA can be done in two ways: "CRA first" or "Other server first"
By CRA-first I mean that the main serving component is the React server, hence serve the React application with yarn start and call a server api configured in package.json's proxy setting. This is easy and clearly explained in Create React App documentation.
By "Other server first" I mean that you serve everything (HTML etc) with a web framework of your choice but that the served HTML also loads the React application. The documentation explains how to deploy in such situation (basically yarn build the app and normally load the generated JavaScript file(s) from your HTML) but not how to do this in development.
So, how can I serve with an arbitrary server my possibly dynamic HTML and in such HTML reference the deployment JavaScript that CRA keeps updated?
It is explained in the documentation in the section Static Server https://facebook.github.io/create-react-app/docs/deployment#static-server
You just build yarn build and serve it using serve -s build 4000. Or you can use Apache/Nginx or whatever you want instead of serve. But you need to rebuild your application every time you make changes and restart the server. This way you won't get hot reload etc. You need Webpack server (CRA integrates it in the background) for that.

Spring Boot and React: Rendering app.js in index.html of Spring application

In this tutorial on using String Data REST with React
it says to create an HTML file called index.html in the Spring Boot project and have a div where I can render the React component.
The problem I have is my React app is a completely different project. How do I do this or what else can I do to fix this? Thank you very much for the help!
You could do two things:
You could run them both in separate projects as you have it now and run them on different ports locally, however that means you need to enable cross-origin requests on your server or configure a proxy in the react project. (If you used create-react-app you can just add "proxy": "http://localhost:8080" in your package.json file where http://localhost:8080 is the url to your backend.).
You could move all the files into one project and have your React project run on the embedded Spring server. However this requires some re-configuration of your webpack.config.js and some restructuring of files.
I suggest the first option which is easier and also probably how you would like to run your application in the future, with one container for the client-side code and one container for your backend code.

How do my Vuejs frontend and my node express backend interact with each other and do i need the vue-cli?

I am trying to build a simple website with nodejs, express and vuejs.
In tutorials i saw people recommending having the frontend and the backend communicate through an API by using the vue-cli. (example). 1. Do People use this method in production as well?
I also saw that you can build the vue cli files into a /dist folder and move this folder into the backend. Then you can use the backend to serve the generated index.html (example)
2. After doing this, is vue.js still communicating with the backend through the api i wrote with the vue cli for development?
3. Do i have to change code in the backend to deploy the website this way, other than statically serve the index.html file that was build by the vue-cli? and lastly 3.Can i just npm install vue and use the provided vue.min.js in a scripttag and just lose some usablillity while developing?
I hope my question is understandable and i appreciate every answer.
The backend typically serves the frontend via REST API.
Your Vue app is completely separate from your backend. Most applications keep business logic in the backend and use the frontend as a view. For smaller projects, you can keep the logic in the browser.
To answer your question directly: No, the Vue CLI is not used for that. It's purpose is to enhance your development process.
Relevant topics you should learn about: Representational state transfer (REST), Single page applications, Ajax
Advanced / less relevant topics: GraphQL, Server side rendering, HTTP, web sockets, MVC

How to run a ReactApp in Apache Tomcat?

I'm able to run any ReactApp only on Nodejs server, but not on a Tomcat server.
Some Qs:
React is purely client side rendered library, and why it requires Nodejs (which is server based)? Why React official Tut recommends Nodejs?
Is it true that Tomcat is for running pure Java applications, and Nodejs for pure JavaScript applications?
I tried to run a sample ReactApplication with few containers in Apache Tomcat, by including the Reactjs include files. But, I get a blank screen. Inspect element shows the non rendered JS source.
Update 1:
If yes for Q1, then Here's a simple React ready application (with all dependencies included) which is easy to run in Nodejs using NPM. How can I run the same app in Tomcat? Can I able to create Web ARchive using this?
1.React is purely client side rendered library, and why it requires Nodejs (which is server based)? Why React official Tut recommends Nodejs?
React is a client-side library but it requires NodeJs for below reasons :
- React uses JSX syntax which browsers doesn't understand and hence it needs to convert into a javascript code that browsers can understand, Babel will do that. Babel needs NodeJs and with the configuration you can convert JSX, ES6 code into ES 5 which browsers can understand
- You may also need node js server if you are using React on server side but this is optional
The sample that you have given needs to transpile into ES 5 code using web-pack which uses Babel. WebPack and Babel both need node js. Hence you need NodeJs.
I don't know what you hide under ReactApp.
But if you use React in client Side you don't need Nodejs server to run it. You can you Nodejs to build it, there is tools to simplify the work. So your ReactApp will be only an HTML page with some js dependencies. Apache or Tomcat can serve it, but for Tomcat you have to bundle it as WAR I think.
But you need rest endpoint to do some stuff, and you can do that with lot of technologies include java and tomcat.
YES

Categories