I'm trying to prep my server to intake ajax calls. I am trying to learn more about React and I have been trying to figure out the server-side. Most of the syntax, I took from different tutorials I've watched. The server.js does connect with the postgres db. but then the app crashes as soon as I try to bring in the routes. In the server.js, there's a line I tried to highlight for the reader. I surround it with *********. That's when I tried to bring in the route(./routes/songs.js).
This is a React app. The database is postgres with sequelize
What is it that I'm missing and doing wrong?
error
throw new TypeError('Router.use() requires middleware function but got a ' + gettype(fn));
^
TypeError: Router.use() requires middleware function but got a string
at Function.use (/Users/Kainoa/DevLeague/kanakaHacks_Software/KanakaMusicR/KMR/node_modules/express/lib/router/index.js:458:13)
at EventEmitter.<anonymous> (/Users/Kainoa/DevLeague/kanakaHacks_Software/KanakaMusicR/KMR/node_modules/express/lib/application.js:219:21)
at Array.forEach (native)
at EventEmitter.use (/Users/Kainoa/DevLeague/kanakaHacks_Software/KanakaMusicR/KMR/node_modules/express/lib/application.js:216:7)
at Object.<anonymous> (/Users/Kainoa/DevLeague/kanakaHacks_Software/KanakaMusicR/KMR/server.js:33:6)
at Module._compile (module.js:425:26)
at Object.Module._extensions..js (module.js:432:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:311:12)
at Function.Module.runMain (module.js:457:10)
server.js
require('babel-register')
const express = require('express')
const React = require('react')
const ReactDOMServer = require('react-dom/server')
const ReactRouter = require('react-router')
const match = ReactRouter.match
const RouterContext = ReactRouter.RouterContext
const ReactRedux = require('react-redux')
const Provider = ReactRedux.Provider
const Store = require('./js/Store.jsx')
const store = Store.store
const _ = require('lodash')
const fs = require('fs')
const port = 5050
const baseTemplate = fs.readFileSync('./index.html')
const template = _.template(baseTemplate)
const ClientApp = require('./js/ClientApp.jsx')
const Routes = ClientApp.Routes
const app = express()
const db = require('./models')
app.use('/public', express.static('./public'))
app.all('/*', function (req, res, next) {
res.header('Access-Control-Allow-Origin', '*')
res.header('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type')
res.header('Access-Control-Allow-Methods', 'GET, PUT, POST, DELETE')
next()
})
*************app.use('/', './routes/song.js')*******************
app.use((req, res) => {
match({ routes: Routes(), location: req.url }, (error, redirectLocation, renderProps) => {
if (error) {
res.status(500).send(error.message)
} else if (redirectLocation) {
res.redirect(302, redirectLocation.pathname + redirectLocation.search)
} else if (renderProps) {
const body = ReactDOMServer.renderToString(
React.createElement(Provider, {store},
React.createElement(RouterContext, renderProps)
)
)
console.log(body)
res.status(200).send(template({ body }))
} else {
res.status(404).send('Not found')
}
})
})
var server = app.listen(port, function () {
db.sequelize.sync()
console.log('server listening on port ' + server.address())
})
song.js (the route)
'use strict';
const express = require('express')
const router = express.Router();
const bodyParser = require('body-parser')
const db = require('./../models')
const Song = db.Song;
router.use(bodyParser.json({ extended : false }));
router.get('/',function(req, res){
console.log('made it to this Call')
});
module.exports = router
I think the problem is this app.use('/', './routes/song.js')
rather it should be app.use('/', require('./routes/song.js'));
app.use
expects a function as the second argument but here it gets a string.
Server.js
require('babel-register')
const express = require('express')
const React = require('react')
const ReactDOMServer = require('react-dom/server')
const ReactRouter = require('react-router')
const match = ReactRouter.match
const RouterContext = ReactRouter.RouterContext
const ReactRedux = require('react-redux')
const Provider = ReactRedux.Provider
const Store = require('./js/Store.jsx')
const store = Store.store
const _ = require('lodash')
const fs = require('fs')
const port = 5050
const baseTemplate = fs.readFileSync('./index.html')
const template = _.template(baseTemplate)
const ClientApp = require('./js/ClientApp.jsx')
const Routes = ClientApp.Routes
const app = express()
const db = require('./models')
app.use('/public', express.static('./public'))
app.all('/*', function (req, res, next) {
res.header('Access-Control-Allow-Origin', '*')
res.header('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type')
res.header('Access-Control-Allow-Methods', 'GET, PUT, POST, DELETE')
next()
})
app.use('/', './routes/song.js'));
app.use((req, res) => {
match({ routes: Routes(), location: req.url }, (error, redirectLocation, renderProps) => {
if (error) {
res.status(500).send(error.message)
} else if (redirectLocation) {
res.redirect(302, redirectLocation.pathname + redirectLocation.search)
} else if (renderProps) {
const body = ReactDOMServer.renderToString(
React.createElement(Provider, {store},
React.createElement(RouterContext, renderProps)
)
)
console.log(body)
res.status(200).send(template({ body }))
} else {
res.status(404).send('Not found')
}
})
})