link to repo
link to bug report
I've been following Lama Dev's Social Networking Tutorial
but running it in docker containers, which he doesn't do in the tutorial. One of those containers is Traefik, which acts as a gateway for 80 and 443 and one more for an admin panel, but I haven't opened 8800 for the API because I was under the understanding that React should still see it in docker's default network, I'm not sure if the 405 is coming from the API or if that's still in React, what I've read on 405 says it's usually in the client and the line that logs the error is in React but it's in a failed call, so maybe the 405 message is an Axios response, it's saying the connection isn't allowed. I'm not sure what else to try changing?
It seems to work fine locally in Development But not in Production, It's usually up at https:geoLARP.com, if it's down for a few minutes I'm probably trying a rebuild on the server and it'll be back up shortly.
I've also wondered if I need to remove CORS
, he has them in the repo but never mentions them in the video..
The only environment variable from dev to prod that I think might make a difference is LOCAL_HOST, I'm changing it to geolarp.com, should I be including the HTTP://
too?
![Screenshot from 2021-10-11 13-00-14](https://user-images.githubusercontent.com/7327259/136828287-cf9d1b9c-aa21-4cba-8893-cd3f0ac5e1cf.png)
export [email protected]
export LOCAL_HOST=localhost
export MongoDB_PASSWORD=butterzCUPz
export MongoDB_USERNAME=janeDOE
export WORDPRESS_DB_HOST=db
export WORDPRESS_DB_NAME=exampledb
export WORDPRESS_DB_PASSWORD=examplepass
export WORDPRESS_DB_USER=exampleuser
docker-compose up -d --build
docker-compose down -v --remove-orphans
I started to try through PostMan, but currently, I've not left the API open to the public, I was expecting React would see it over the docker default network by just changing the proxy to the API container. so I've changed localhost:8800
to mernlama:8800
in an .env
file
![Screenshot from 2021-10-11 12-20-45](https://user-images.githubusercontent.com/7327259/136823549-c60f3222-6f6e-4a15-9170-0e8d6206f04f.png)
Regist.jsx
import axios from "axios";
import { useRef } from "react";
import { useHistory } from "react-router";
import "./register.css";
export default function Register() {
const username = useRef();
const email = useRef();
const password = useRef();
const passwordAgain = useRef();
const history = useHistory();
const handleClick = async (e) => {
e.preventDefault();
// console.log(email.current.value);
if (passwordAgain.current.value !== password.current.value) {
passwordAgain.current.setCustomValidity('PassWords do not Match');
} else {
const user = {
username: username.current.value,
email: email.current.value,
password: password.current.value,
};
try {
await axios.post("/auth/register", user);
history.push("/login");
} catch (err) {
console.log(err);
}
}
};
return (
<div className="login">
<div className="loginWrapper">
<div className="loginLeft">
<h3 className="loginLogo">geoLARP</h3>
<span className="loginDesc">
GeoLocated
</span>
<span className="loginDesc">
Live Action Role Playing
</span>
</div>
<div className="loginRight">
<form className="loginBox" onSubmit={handleClick} >
<input
placeholder="Username"
required
className="loginInput"
ref={username}
/>
<input
placeholder="please use a disposable Email"
type='email'
required
className="loginInput"
ref={email}
/>
<input
placeholder="Password"
type='password'
required
minLength="6"
className="loginInput"
ref={password}
/>
<input
placeholder="Password Again"
type='password'
required
className="loginInput"
ref={passwordAgain}
/>
<button className="loginButton" type='submit' >Sign Up</button>
<button className="loginRegisterButton">
Log into Account
</button>
</form>
</div>
</div>
</div>
);
}
expressAPI/routes/auth.js
const router = require('express').Router();
const User = require('../models/User');
const bcrypt = require('bcrypt');
// REGISTER
router.post('/register', async (req, res) => {
try {
// generate a salty password
const salt = await bcrypt.genSalt(10);
const hashedPassword = await bcrypt.hash(req.body.password, salt);
// create a new user
const newUser = new User({
username: req.body.username,
email: req.body.email,
password: hashedPassword,
});
// save the user and respond
const user = await newUser.save();
console.log(user);
res.status(200)
// .json({ message: 'Registered User with API AUTH Route', user: user._id });
.json(user);
} catch (err) {
res.status(500).json(err);
}
}); // GET /api/auth
// LOGIN
router.post('/login', async (req, res) => {
try {
// find the user
const user = await User.findOne({ email: req.body.email });
// check if the user exists
!user && res.status(404).json('User not found');
// check if the password is correct
const validPassword = await bcrypt.compare(req.body.password, user.password);
!validPassword && res.status(400).json('Invalid Password');
// respond with the user
res.status(200).json(user);
} catch (err) {
res.status(500).json(err);
}
}); // GET /api/auth/login
module.exports = router;
// export default router;
![Screenshot from 2021-10-11 11-39-44](https://user-images.githubusercontent.com/7327259/136823137-da2c7c1c-07c3-4735-b95b-c2d268079d7b.png)
![Screenshot from 2021-10-11 11-40-19](https://user-images.githubusercontent.com/7327259/136823154-288e230d-c5b7-4d43-8e40-d81889d79c9a.png)
UPDATE
I've started looking at the NGINX configuration. If I understand correctly the React proxy is just for local development. So I've been looking at how Nginx Configures the Proxy Pass-Through.. These are the 2 I've tried so far, the commented out is what I tried first, but I don't have the experience with Nginx to know which settings I really need. I got Bad GateWay with the commented-out settings.
nginx.conf
server {
listen 80;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
# location /api {
# resolver 127.0.0.11;
# proxy_set_header X-Forwarded-Host $host;
# proxy_set_header X-Forwarded-Server $host;
# proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
# proxy_pass http://mernlama:8800/api;
# }
location /api {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-NginX-Proxy true;
proxy_pass http://mernlama:8800/api;
proxy_ssl_session_reuse off;
proxy_set_header Host $http_host;
proxy_cache_bypass $http_upgrade;
proxy_redirect off;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}