43
React
All our handlers have been created, now it's time to connect our server to the client.
Remember including
Remember including
Cors::permissive()
as one of the middle ware services available for the server, this will enable our client connect to the server. Also keep in mind that this particular way of granting access to an external service is only for development, Cors::default()
is the standard for production.# run the setup command
npx create-reat-app client
Delete the following files in the
src
& public
directory except.src/App.js
src/index.js
src/reportWebVitals.js
public/index.html
public/favicon.ico
public/manifest.json
public/robot.txt
In this context axios is used to send request from our JavaScript client to our Rust server and also receive response from our Rust server to our JavaScript client, install axios.
Create a new file in the src directory
// src/config.js
export const INVITATION = 'http://localhost:8080/api/invitation';
export const REGISTER = "http://localhost:8080/api/register";
export const FOMO = "http://localhost:8080/api/auth";
Each constant variable represent routes for request handlers we previously defined.
Update
src/App.js
import axios from 'axios';
import { useState } from 'react';
import { INVITATION } from './config';
import { REGISTER } from './config';
import { FOMO } from './config';
const App = () => {
const [path, setPath] = useState();
const invitation = () => {
axios.post(
`${INVITATION}`,
{
email: "doordashcon@gmaill.com"
},
{
withCredentials: true
}
).then(res => console.log(res))
}
const register = () => {
axios.post(
`${REGISTER}/${path}`,
{
password: "pikachu"
},
{
withCredentials: true
}
).then(res => console.log(res))
}
const fomo = () => {
axios.post(
`${FOMO}`,
{
email: "doordashcon@gmaill.com",
password: "pikachu"
},
{
withCredentials: true
}
).then(res => console.log(res))
}
return(
<>
<div>
<button onClick={invitation}>
Invitation
</button><br />
<form>
<input type="text" onChange={(e) => setPath(e.target.value)}/>
<button onClick={register}>
register
</button>
</form>
<br />
<button onClick={fomo}>
fomo
</button>
</div>
</>
)
}
export default App;
43