I've been trying to make a forum for my friends youtube channel. When I try to make a register post action my signup form component doesn't load and I get an error in the console saying "Unexpected Token <". I'm also using webpack and the redux-minimal boilerplate.
SU.js (Signup):
import React from 'react';
export default class SU extends React.Component
{
render()
{
return(
<form action='/su' method='post'>
<p>Username:</p>
<input type='text' name='u' />
<p>Password:</p>
<input type='text' name='p' />
<p>Email:</p>
<input type='text' name='e' />
<input type='submit' value='Register'/>
</form>
);
}
}
Server.js:
const express = require('express');
const mg = require('mongoose');
const bp = require('body-parser');
app.use(bp.json());
app.use(bp.urlencoded({extended: true}));
mg.connect('mongodb://localhost/cancersquad/users');
// http://expressjs.com/en/4x/api.html
const app = express();
const port = process.env.PORT || 3000;
const public_path = express.static(__dirname + '/public');
const index_path = __dirname + '/public/index.html';
app.use(public_path);
app.get('*', function (request, response) {
response.sendFile(index_path, function (error) {
if (error) {
console.log(error);
}
});
});
const users = mg.Schema({
username: String,
password: String,
email: String
});
const user = mg.model('user', users);
app.post('/su', function(req,res){
var newUser = new user({
username: req.body.u,
password: req.body.p,
email: req.body.e
})
});
app.listen(port);
console.log("Listening at http://localhost:" + port);
webpack.config.js:
// http://webpack.github.io/docs/configuration.html
// http://webpack.github.io/docs/webpack-dev-server.html
var app_root = 'src'; // the app root folder: src, src_users, etc
var path = require('path');
var CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
app_root: app_root, // the app root folder, needed by the other webpack configs
entry: [
'babel-polyfill',
__dirname + '/' + app_root + '/index.js',
],
output: {
path: __dirname + '/public/js',
publicPath: 'js/',
filename: 'bundle.js',
},
module: {
loaders: [
{
test: /\.js$/,
loaders: ['react-hot', 'babel'],
exclude: /node_modules/,
},
{
// https://github.com/jtangelder/sass-loader
test: /\.scss$/,
loaders: ['style', 'css', 'sass'],
},
{
test: /\.css$/,
loaders: ['style', 'css'],
}
],
},
devServer: {
contentBase: __dirname + '/public',
},
plugins: [
new CleanWebpackPlugin(['css/main.css', 'js/bundle.js'], {
root: __dirname + '/public',
verbose: true,
dry: false, // true for simulation
}),
],
};
Package.json:
{
"name": "redux-minimal",
"version": "1.0.0",
"description": "Start building complex react-redux apps today, with this minimalist easy to understand starter kit (boilerplate)",
"keywords": [
"react",
"redux",
"minimal",
"starter kit",
"boilerplate"
],
"main": "index.js",
"homepage": "http://redux-minimal.js.org/",
"repository": {
"type": "git",
"url": "https://github.com/catalin-luntraru/redux-minimal"
},
"scripts": {
"start": "concurrently \"webpack --watch --config webpack.dev.config.js\" \"node server.js\"",
"start-prod": "concurrently \"webpack --watch --config webpack.prod.config.js\" \"node server.js\"",
"test": "mocha --recursive --compilers js:babel-register --require babel-polyfill --require ignore-styles",
"test-watch": "npm test -- --watch"
},
"babel": {
"presets": [
"es2015",
"react",
"stage-3"
]
},
"author": "Catalin Luntraru",
"license": "MIT",
"dependencies": {
"body-parser": "^1.17.2",
"express": "^4.14.0",
"mongoose": "^4.10.5",
"react": "^15.4.2",
"react-bootstrap": "^0.30.7",
"react-dom": "^15.4.2",
"react-hot-loader": "^1.3.1",
"react-redux": "^5.0.2",
"react-router": "^3.0.1",
"react-router-bootstrap": "^0.23.1",
"react-router-redux": "^4.0.7",
"redux": "^3.6.0",
"redux-form": "^6.4.3",
"redux-saga": "^0.14.3"
},
"devDependencies": {
"babel-core": "^6.21.0",
"babel-loader": "^6.2.10",
"babel-polyfill": "^6.20.0",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-3": "^6.17.0",
"babel-runtime": "^6.20.0",
"clean-webpack-plugin": "^0.1.15",
"concurrently": "^3.1.0",
"css-loader": "^0.26.1",
"enzyme": "^2.7.0",
"extract-text-webpack-plugin": "^1.0.1",
"ignore-styles": "^5.0.1",
"mocha": "^3.2.0",
"node-sass": "^4.3.0",
"parallelshell": "^2.0.0",
"react-addons-test-utils": "^15.4.2",
"redux-freeze": "^0.1.5",
"sass-loader": "^4.1.1",
"style-loader": "^0.13.1",
"webpack": "^1.14.0",
"whatwg-fetch": "^2.0.1"
}
}
via AquaPlayzX
No comments:
Post a Comment