I am currently developing a basic login page in React that needs to connect to a database through an AJAX call to a Node.js file.
Here is the Node.js code I have implemented:
var express=require('express');
var app=express();
var db=require('./db');
var bodyParser=require('body-parser');
var server=require('http').Server(app);
app.set('port',process.env.PORT||8080);
app.use(bodyParser.json());
app.set('views','views');
app.set('view engine','html');
app.use(express.static('./public'));
app.use(bodyParser.urlencoded({
extended:true
}))
app.use(express.json());
app.use(express.urlencoded());
app.post('/newuser',function(req,res){
console.log(req.body.username);
console.log(req.body.password);
})
Below is an excerpt of the AJAX call from the React file:
import React from 'react';
import ReactDOM from 'react-dom';
import $ from 'jquery';
import {MusicApp} from './music-app.js';
class Signup extends React.Component{
constructor(props){
super(props);
this.state={
isLoggedin:false
}
this.changePage=this.changePage.bind(this);
}
changePage(){
var username=document.getElementById('username').value;
var password=document.getElementById('password').value;
var that=this;
$.ajax({
type:'POST',
url:'/newuser',
data:{
username:username,
password:password
},
success:function(){
that.setState({
isLoggedin:true
})
}
})
}
render(){
if(this.state.isLoggedin){
return(
<MusicApp/>
)
}else{
return(
<div>
<input type='text' id='username' placeholder='username'/>
<input type='password' id='password' placeholder='password'/>
<input type='button' id='signup' value='Signup' onClick={this.changePage}/>
</div>
)
}
}
}
ReactDOM.render(<Signup />,document.getElementById('container'));
index.html
<!DOCTYPE html>
<html>
<head>
<title>
todo-app
</title>
<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
</head>
<body>
<div id="container"> </div>
<script type="text/javascript" src="http://localhost:8080/build/vendors.bundle.js"></script>
<script type="text/javascript" src="http://localhost:8080/build/musicApp.bundle.js"></script>
</body>
</html>
Upon running the code on port 8080, I encounter a 404 error for xhr request not found. The folder structure of my project can be viewed here. The ajax call originates from signup.js. I have already executed npm install --save express and npm install --save body-parser.
What could possibly be missing in my setup?