I just started working with React and I came to 2 big questions that I never realized before:
Why does React need to connect to a server (localhost, deployment, etc)? Isn't it usually the backend that needs the server url, not the frontend? From my frontend experience, I would just have a .js file with jQuery doing the DOM scripting for the associated html file and that was it.
If I am making a React full stack application with let's say a .NET backend, then React will have its localhost:3000 server url and the .NET backend (ASP.NET Core) would have something like a localhost:54204. Does that mean I need 2 deployments to run that application? Is that normal, or is there some process to mesh the two?
Thank you so much for answering this, hopefully these 2 questions answered will make me fully grasp the concept of React
For the first question does react have server and why? Yes it has and its in the bundler which is called webpack. In fact it runs server script under hood and it is for development. What about the deployment when you use create-react-app and finish your app you can run npm run buld it creates a folder for bundled files. So you can use it in your backend a static files or can create different server script and deploy as an independent application.
Related
I realize that there have been similar questions asked here, but I sort of need things to be spelled out for me.
I have a VPS (through Vultr), which currently hosts a frontend Vue.js app on port 8080, and a backend Node.js (with Express) app on port 5000. The main directory is divided like so:
./client
frontend Vue.js files
./server
backend Node.js files
The frontend app includes a contact form, which upon submit makes an axios POST request to the backend app. The backend app then uses Nodemailer and a Gmail account to send an email with the form's submitted information.
As it stands, I have to run my Vue.js app and my Node.app at the same time on different ports. This seems strange to me, considering that they're really just parts of one cohesive app, and my goal is to eventually host it as a website on port 80. With this in mind, I'd like to ask what the standard practice would be for hosting the frontend Vue.js app and the backend Node.js app together.
Thank in advance for any replies.
Try to think about it in this way that Vue.js is another js library. So if all the code for Vue templates can be bundled in a single file, then you can use that file in your index.html( I hope you know how to host a basic static page using express). The thing you require here is a "package bundler" like webpack or gulp.
A package bundler helps you to compress and bundle your code. So just bundle all your vue files into a single javascript file and use it. I apologize for not being able to spell out the things for you I hope it helps.
I'm attempting to build a simple react/node/express app from scratch (not using the create-react-app). I've built out a simple back end to pass some data to the front end but am having a hard time figuring out how the two communicate. How can I run the front-end and back-end together and view the front-end with the data passed into it?
I'd like to do this all in one command. Do I have to use a tool like webpack to bundle everything together into one runnable package?
My repo can be found here, it is the react-and-express branch that I've linked to. Any help is much appreciated! Currently I'm running the app by starting index.js but that is only the backend, how do I run my front-end App.js and get the two to communicate?
https://github.com/int-a/contacts-application/tree/react-and-express
You can use concurrently to run two node commands at the same time (1 for front-end and 1 for back-end). And then use the proxy configuration in webpack dev server to alias the calls to the backend port number for the same machine.
my issue: I have server written using Spring Boot, Spring Data, MongoDB and postgreSQL. My client is written with React/Redux. I keep them in two separated git repos. Now I’d like to deploy them to Heroku. I already deployed back end but now I’m not sure how to add frontend. I’d prefer to have it as one app because then I wouldn’t have to worty about csrf.
what solutions I was thinking about: As far as I’m concerned I see two solutions:
1) deploying front end as a separated app and make calls to backend (already deployed app)
2) somehow making it into one app. I read a couple of solutions and one suggested making a Procfile, but in that question there was one git repo. Deploy two separate heroku apps from same git repo
I’m using Maven and Yarn.
If your client project is also a maven project, you can make it a dependency of your server project.
You can then make the build copy your client artifact into the src/main/resources/static folder and have your server application serve the client as static content.
Update: This link is a good guide how to do it: https://blog.jdriven.com/2016/12/angular2-spring-boot-getting-started/
It describes a multi module maven project with a spring rest backend- and an angularjs frontend module. But I am certain that the principle will work also with a react/redux frontend in a separate project.
It will require some tweaking though:)
I'm struggling with this for quite a long time. I'm java developer so I know my ways with backend, but I'm lost in frontend world. I know how it goes all this frameworks, build tools and node.js on top.
What I want to resolve is how to separate those 2 worlds, combining gulp, jspm and maven in one project seems to be pretty painful. So my way of thinking is now to create two maven project one for BE and one for frontend SPA. The problem is backend part needs to serve the frontend and here we are.
I'd like to have SPA bundle with the most easier hook in backend just for serving the boot page or something.
I see some problems, the bundle containing the SPA will be big to download at once, is there some other way how to solve it?
Requirements:
back-end will be Spring
there will be only java app.server
back-end will be restful build completely only by maven
right now I'm running an ember-cli application on heroku by serving it with the ember server command (not sure if this is the best method) and I'd like to integrate it with New Relic, but I have no idea how to do it.
Careful, ember server starts a live-reload server for development purposes — you edit a file, save it, and the application gets rebuild in an instant — you should not use it to serve an Ember app in production, it's a potential security risk. Normally you run ember server only on your local computer where you develop the code.
For production, build your app with ember build --environment=production, that will create a set of static files in your project's dist/ directory. You can upload these as you would upload any HTML/CSS/Javascript.
Keep in mind that Ember (and other frameworks of this kind like Angular and Backbone) is a single page application (SPA) framework; there is no server-side code at all, it all runs in the browser. Usually you would provide some sort of API (like a REST-API) on the server to provide and process data from a database or to provide other server-side services. That way you can develop the front and back-end separately.
I'm not too familiar with New Relic, but as far as I can tell it is analytics software that runs on the back-end, so it has nothing to do with your browser-side framework.
At the server folder, just find the index.js file and add require('newrelic'); at the beginning of the file. Of course you should also follow the instructions when you setup New Relic at you Heroku App, setting your application as a node.js app, which means you'll have to run npm install --save newrelic, go to your node_modules folder, find newrelic, copy newrelic.js file to the root of your application and edit the file with your app_name and license_key.
I recently removed my code from <meta ... in app/index.html and started to use this addon Ember-new-relic.
Get the JavaScript snippet.
And add it below <meta http-equiv="X-UA-Compatible"... in app/index.html.