5 video tutorial series
Original LoopBack & React tutorial from Traversy for comparison
I've followed the tutorial and got it to function on Cloud 9 in developement.. I wasn't sure about how to set the port to an Environment variable, so I hardcoded my ports with 8080 for Cloud 9.. now I'm trying to run it on Heroku and all my axios posts are broken.
I think I changed all the links back from
axios.get(`http://foood-liberation-front-turtlewolfe.c9users.io:8080/api/Barrels/${barrelID}`)
to axios.get(`http://localhost:3000/api/Barrels/${barrelID}`)
but I'm still missing something, I can get it to compile on Heroku at
https://food-liberation-frontz.herokuapp.com
but when I click on the save link to add a new barrel, it's broken.
```
import React, { Component } from 'react';
import axios from 'axios';
import { Link } from 'react-router-dom';
class AddBarrel extends Component {
addBarrel(newBarrel){
console.log(newBarrel);
axios.request({
method:'post',
url:'http://foood-liberation-front-turtlewolfe.c9users.io:8080/api/Barrels',
data: newBarrel
}).then(response => {
this.props.history.push('/');
}).catch( err => console.log(err));
}
onSubmit(e){
const newBarrel = {
Name: this.refs.Name.value,
barrel_number: this.refs.barrel_number.value,
contents: this.refs.contents.value,
date_last_checked: this.refs.date_last_checked.value,
date_planted: this.refs.date_planted.value,
location: this.refs.location.value,
size: this.refs.size.value,
notes: this.refs.notes.value
}
this.addBarrel(newBarrel);
e.preventDefault();
}
render () {
return (
<div className = "container green lighten-3" >
<br />
<Link className = "btn grey" to = "/">back</Link>
<h6>add a Barrel</h6>
<form onSubmit = {this.onSubmit.bind(this)}>
<div className = "input-field" >
<input type = "text" name = "Name" ref = "Name" />
<label htmlFor = "Name" >Name</label>
</div>
<div className = "input-field" >
<input type = "text" name = "barrel_number" ref = "barrel_number" />
<label htmlFor = "barrel_number" >barrel number</label>
</div>
<div className = "input-field" >
<input type = "text" name = "contents" ref = "contents" />
<label htmlFor = "contents" >contents</label>
</div>
<div className = "input-field" >
<input type = "date" name = "date_planted" ref = "date_planted" />
<label htmlFor = "date_planted" ></label>
</div>
<div className = "input-field" >
<input type = "date" name = "date_last_checked" ref = "date_last_checked" />
<label htmlFor = "date_last_checked" ></label>
</div>
<div className = "input-field" >
<input type = "text" name = "location" ref = "location" />
<label htmlFor = "location" >location</label>
</div>
<div className = "input-field" >
<input type = "text" name = "size" ref = "size" />
<label htmlFor = "size" >size</label>
</div>
<div className = "input-field" >
<input type = "text" name = "notes" ref = "notes" />
<label htmlFor = "notes" >notes</label>
</div>
<input type = "submit" value = "Save" className = "btn" />
</form>
</div>
)
}
}
export default AddBarrel;
```
Have you defined what your application should do when the server receives the POST request you've defined above from the front end? For example...
In your React component above your POST request might look like this. I've modified your code above, specifically the URL. Note that your browser is already pointed to your application's URL, but you're looking to make a POST request to a specific route within your application.
axios.request({
method:'post',
url:'/api/Barrels',
data: newBarrel
})
Your server would receive the request to that route, do some stuff, and respond accordingly. The code below would probably live in server.js.
app.post('/api/Barrels', function (req, res) {
res.send('STUFF BACK TO FRONT END')
})