We want to hook up our Bounty hunter server to a front end. What do we need to do to accomplish this? Let's plan it out.
Let's look at the code you've been given. What is it doing?
Because we have a decoupled app, we aren't able to access our bounty server without allowing Cross-origin Reference Sharing. Open up your bounty server and let't fix that.
Run npm i cors
to install the cors module. If you haven't already, also install dotenv
and require it at the top of your server.js
(or whatever you named your entry-point).
We could fix this super quick by simply requiring cors, then app.use
ing it.
...
const cors = require('cors');
app.use(cors())
The benefit of this method is that it's quick. The downside of this method is that it allows ANY site to make a call to this API. For an open API like the Kanye Rest API, this is a good thing! But since our employers are super secretive, we want to be able to restrict which origins can query this API.
If we want to allow one origin to access our API, we can add some configuration to our cors
.
const cors = require('cors')
app.use(cors({
"origin": process.env.CLIENT_URL
}))
You can look at the cors docs to impliment other configurations that allow you to:
- Allow CORS only on certain routes (it functions the same as our
isLoggedIn
middleware from express auth) - Allow CORS from multiple origins (good if you have different clients calling this API: think paid service)
Since we're using a react app, we need to tell our express app that our body might be json (as opposed to x-www-form-urlencoded
). RIght under where we import the middleware that handles form data, we're going to add one line:
app.use(express.json())
We're gonna be sneaky and hide our approved CORS origin in our .env
, so let's add it into our .env
. While we're at it, let's change our port to be 3001 so we don't conflict with our react server.
to do list
- set up server base url in our .env
- make sure we can get info from our server
- pass all dem deets into our
BountyCard
component - Link our
NewBounty
form page - write form handlers
- Impliment a delete button