I have a project with React front end and Node backend using ExpressJS. The backend server basically just returns a json that I can fetch data on my front end. On back end, there is a xml file. So the whole process is convert xml->json on express backend, then fetch data from express backend on react front end.
When I do node index.js to start the server, and do npm start to start my front end, everything works perfect, the front end renders all data.
Then I wanted to deploy this project on Heroku. I put all files into one directory and seperate with client and server directories. Then I npm start build the code in react. In my index.js file of backend, I have
app.use(express.static(path.join(__dirname + '/public')))
and then I copied and pasted build files into the public directory in my server directory. I should be supposed to run the app by node index.js, the app worked, however, the data was not read. Is that because I only started the front end but did not start the server so I didnt get any data? How do I fix this?
Related
I am new to reactJS. I am working on project which uses following :
Front-end : ReactJS
Backend : NodeJS (Express)
Front-end runs on port 3000
Back-end runs on port 8088.
I am planning to deploy application on amazon AWS.
What i am trying to do is load reactJS front-end when i make request on http://localhost:8088/
I know using axios we can make request on backend server and display fetched data.
What would be standard way of loading ReactJS front from the nodeJS ?
I'm not sure if this is the answer you are looking for, but generally in development you use something called proxy in your package.json in the client (react) folder:
{
// Other stuff
"proxy": "http://localhost:8088"
}
and then when you'd want to deploy you'd run npm build for your react folder and serve that generated folder called build. But as I said, you usually do that only when deploying your application onto server, not the actual development.
Also I'd suggest checking some of these videos, that are focused on deployment, because that is what I think you are asking, right ?
I am new to hosting and it would be of immense help to me if somebody can explain in very detail.
I have following questions:
I have front end using react app and backend using expressjs and mysql. i have a working simple application in my computer . I start backend and front end using local host and they work perfect . when I bought hosting which supports nodejs , I don't know where to place the front end file and backend file .
npm run build - > builds a react app . in cpanel - file manager , which file I should place in public html . front end code or backend express code
I placed html code in public_html but how to start interacting with server.
When I used fetch("http://lcoalhost:30000") to fetch I couldn't get the app.get("/",(req ,resp)) working ..
I am really confused . if somebody can explain in detail how to start uploading both the react and express file and the location to place these files.
Upload your react app build files inside public_html. Don't forget to change the localhost url to your express app to your actual url.
Create a folder outside public_html and upload your express app in it.
Create a nodejs app (using cPanel, if it has). Use the express folder and a url different from home (like /api) during creation.
I have an Angular App and want to start an Express Server (that runs on a different Port) from within my Angular Application. The Express Server is only a single server.js file that handles everything. I dont want it to start just by adding
node server.js
to the package.json, but instead to start it somehow in a Component or Service from the Angular App.
How would I accomplish that?
Could you explain how the files flow in node js with express? For example, the application starts with app.js and then it goes to the routes' index.js file etc. In this flow where to add the business logic and how everything connects?
Node.js is a server side java script language. Express is node.js web application framework.
A basic directory structure for a project could look like this.
- app/ // application content
----- index.html
- node_modules/ // created by npm. holds our dependencies/packages
- package.json // define all our node app and dependencies
- server.js // entry point for application
You'll generally serve some type of index.html file as entry point for your application (declared in your server.js file). You will also have other routes defined in the server.js file that implement business logic or serve other content.
For instance if I was currently navigating to index.html (the default route '/') and clicked a button that is supposed to retrieve some data from the back end, I would implement something in the front end (AJAX call, Angular) to call my backend server functionality. My backend functionality would then go and process my request and send a response back to the front end.
The following is a very basic example of how you "glue" the front and back end together.
Backend:
app = express();
app.get('/getData',function(res,req){
/... code to get the data .../
});
Front-end:
$http.get('http://localhost:8080/getData').success(function(data){
/... do what needs to be done at the front end to display data .../
});
I have a single project which runs sails app on 1337 port and react on 3000. How can I deploy both to single heroku instance ? Which runs sails on 1337 and react on 3000.
You need to integrate React with Sails.
React is all about static files (e.g. HTML, JS and CSS). To integrate React with Sails, a naive solution is to copy the compiled React files to the Sails assets folder.
Below is what I have tried with a brand new Sails app. It just works.
Edit config/blueprints.js to change the API prefix. From now on, the APIs changes from http://localhost:1337/<RESOURCE> to http://localhost:1337/api/<RESOURCE>.
module.exports.blueprints = {
// ...
prefix: '/api',
// ...
}
Edit config/routes.js. Remove the following lines if they exist. This makes sure that when someone visit http://localhost:1337, Sails will search for index.html inside the assets folder.
'/': {
view: 'homepage'
}
Update the React application in case it consumes the APIs from Sails (Remember that we have changed the API prefix). Also make sure that the application entry point is index.html.
Compile your React application (by Webpack or Grunt or whatever packaging tool you are using) and copy the compiled files to the Sails assets folder.
Deploy the Sails app to Heroku.
Done!
A better but more tedious solution is to migrate the React development to Sails. I found an example on Google. It might be outdated because the last update was Feb 2016, but you shall use it as a reference.