I have received an error message stating: TypeError: bodyParser.json is not a function. My nuxt.config.js file has the following details regarding bodyparser (I originally had const bodyParser = require('body-parser') but an error appeared telling me that I had to use 'import' instead of 'require' so I changed it to 'import('body-parser'):
const bodyParser = import('body-parser')
export default {
serverMiddleware: [
bodyParser.json(),
'~/api'
]
}
In my index.js file under the api folder, I have the following code:
const express = require('express')
const bodyParser = require('body-parser')
const router = express.Router()
const app = express()
router.use((req, res, next) => {
Object.setPrototypeOf(req, app.request)
Object.setPrototypeOf(res, app.response)
req.res = res
res.req = req
next()
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: true }))
})
router.post('/track-data', (req, res) => {
console.log('Stored data!', req.body.data)
res.status(200).json({ message: 'Success!' })
})
module.exports = {
path: '/api',
handler: router
}
Does anyone know how to get this to run? Everytime I enter 'npm run dev' in the terminal, I get the error 'TypeError: bodyParser.json is not a function'.
I had a slightly similar issue and could solve it with this code, first i imported express in the config file, before i did it like you, with bodyParser, but got a deprecated warning, then i use it in the api folder, in the index file, like so:
// nuxt.config.js
import express from 'express';
export default {
ssr: true,
.......,
.......,
serverMiddleware: [
express.json(),
// Api middleware
{ path: '/api', handler: '~/api/index.js' },
]
}
// ~/api/index.js
// Router setup for serverMiddleware
router.use((req, res, next) => {
Object.setPrototypeOf(req, app.request);
Object.setPrototypeOf(res, app.response);
req.res = res;
res.req = req;
next();
});
export default {
path: '/api',
handler: router
};
hope it helps ! 👍
I'm not familiar with nuxtjs specifically, but after looking at the nuxtjs module export docs it looks like your require inside your index.js should be a path to the file, rather than just the string body-parser which I have to imagine just gets processed something like an npm module if no path is supplied.
Additionally, at least in NodeJS and per the MDN docs on export and import, the syntax to import something that's exported with export default is import { destructuredModuleName } from 'string/representing/relative/or/absolute/path/to/module'
or
import * as whatYouWantToCallTheObject from 'string/representing/relative/or/absolute/path/to/module' would give you a more traditional module object with properties/methods matching properties on the exported module.
This should fix it:
import bodyParser from 'body-parser'
You actually used the import() as a dynamic import. It returned a promise which didn't have the json property. Therefore, the error was displayed.
Related
I've installed the express-nuxt template and I was wondering how could I get access to the privateRuntimeConfig inside nuxt.config.js from express (API folder). One approach I thought about was to put the vars inside a .env file and then installing the dotenv package for the express server, but I think that using just Nuxt could be better.
We have done precisely this by importing the Nuxt config into the file that configures the Express app, and using defu to combine public and private runtime configs, as Nuxt itself does:
// nuxt.config.js
export default {
publicRuntimeConfig: {},
privateRuntimeConfig: { redis: { url: process.env['REDIS_URL'] } }
};
// api/index.js
import express from 'express';
import defu from 'defu';
import { createClient as createRedisClient } from 'redis';
const app = express();
import nuxtConfig from '../nuxt.config.js';
let runtimeConfig;
app.use((req, res, next) => {
if (!runtimeConfig) {
// Load Nuxt config once, at runtime
runtimeConfig = defu(nuxtConfig.privateRuntimeConfig, nuxtConfig.publicRuntimeConfig);
}
next();
});
// Subsequent middlewares will then be able to read from `runtimeConfig`
app.use((req, res, next) => {
const redisClient = createRedisClient({ url: runtimeConfig.redis.url });
next();
});
export default app;
i want to generate sitemap based on routes in vue js project but i could not find any solution for this?
i found vue-router-sitemap package in npm but it did not mention any example and i totally confused? what is the solution for this?
anyway is there any way to access routes object in another normal js file ?
this is the xample of that but what is the app! and how can i use these?
// sitemapMiddleware.js
import VueRouterSitemap from 'vue-router-sitemap';
import path from 'path';
import { router } from 'router';
export const sitemapMiddleware = () => {
return (req, res) => {
res.set('Content-Type', 'application/xml');
const staticSitemap = path.resolve('dist/static', 'sitemap.xml');
const filterConfig = {
isValid: false,
rules: [
/\/example-page/,
/\*/,
],
};
new VueRouterSitemap(router).filterPaths(filterConfig).build('http://example.com').save(staticSitemap);
return res.sendFile(staticSitemap);
};
};
app.get('/sitemap.xml', sitemapMiddleware());
This middleware should place in vue.config.js.
I am using Nuxtjs as a middleware in expressjs, and I have problems with handling errors in express server part.
When browser goes to 'localhost:3000', it will throw res.status is not a function error. when I comment that code block, everything is good expect that I cannot handle with uncaught server errors...
Any ideas?
import dotenv from 'dotenv'
dotenv.config({ silent: process.env.NODE_ENV === 'production', path: 'server/.env' })
import express from 'express'
import { ready } from 'consola'
import { Nuxt, Builder } from 'nuxt'
import cors from 'cors'
import { json, urlencoded } from 'body-parser'
import cookieParser from 'cookie-parser'
import passport from 'passport'
import './utils/auth'
import router from './routes'
const app = express()
app.use(json({ limit: '50mb' }))
app.use(urlencoded({ limit: '50mb', extended: true }))
app.use(cookieParser())
app.use(cors())
app.use(passport.initialize())
app.use('/api', router)
app.use('/api/*', (req, res) => {
res.status(404).end()
})
// error handlers
// it is problematic
// app.use((err, req, res) => {
// res.status(err.status || 500).end()
// })
let config = require('../nuxt.config.js')
config.dev = !(process.env.NODE_ENV === 'production')
async function start() {
const nuxt = new Nuxt(config)
if (config.dev) {
const builder = new Builder(nuxt)
await builder.build()
}
app.use(nuxt.render)
const host = process.env.HOST || '127.0.0.1'
const port = process.env.PORT || 3000
app.set('port', port)
app.listen(port, host)
ready({
message: `Server listening on http://${host}:${port}`,
badge: true,
})
}
start()
Without testing this code myself, I had a similar issue with my custom error handler and realized at one point I removed the next argument and it was failing. Can't say it will fix the issue because you are getting an error about res. I read through this page a few times and noticed a few mistakes I was making because I was using async functions.
Error Handling Guide may provide some help if you look over it carefully, but more specifically my comment about next is found under the title Writing error handlers
I wanted to say it might be arrow functions, but I don't see why that would break the logic here.
Instead of getting redirects from 301.json I want to make a request to my api which returns my json.
I am using the #nuxtjs/axios module.
const redirects = require('../301.json');
export default function (req, res, next) {
const redirect = redirects.find(r => r.from === req.url);
if (redirect) {
console.log('redirect: ${redirect.from} => ${redirect.to}');
res.writeHead(301, { Location: redirect.to });
res.end();
} else {
next();
}
}
Original answer
To build on #Dominooch's answer, if you want to return just JSON, you can use the .json() helper. It automatically sets the content-type to application/json and stringify's an object you pass it.
edit:
To clarify what we're doing here, we're replacing your 301.json entirely and using nuxt's way of creating middleware to:
define a generic handler that you can reuse for any route
defining explicitly which paths will use your handler (what I'm assuming you're 301.json is doing)
If 301.json is really just an array of paths that you want to redirect, then you can just use .map() but i'd personally not, because it's not immediately clear which paths are getting redirected (see my last sample)
That said, the very last thing I would avoid is making a global middleware (fires for every request) that checks to see if the path is included in your array. <- Will make route handling longer for each item in the array. Using .map() will make nuxt do the route matching for you (which it already does anyways) instead of sending every request through your handler.
// some-api-endpoint.js
import axios from 'axios'
export default {
path: '/endpoint'
handler: async (req, res) => {
const { data } = await axios.get('some-request')
res.json(data)
}
}
Then in your nuxt.config.js:
// nuxt.config.js
module.exports = {
// some other exported properties ...
serverMiddleware: [
{ path: '/endpoint', handler: '~/path/to/some-api-endpoint.js' },
]
}
If 301.json is really just an array of paths:
// nuxt.config.js
const routes = require('../301.json');
module.exports = {
// some other exported properties ...
serverMiddleware: routes.map(path =>
({ path, handler: '~/path/to/some-api-endpoint.js' }))
}
Or if you have other middleware:
// nuxt.config.js
const routes = require('../301.json');
module.exports = {
// some other exported properties ...
serverMiddleware: [
...routes.map(path =>
({ path, handler: '~/path/to/some-api-endpoint.js' })),
... // Other middlewares
}
Here's what I did and it seems to work:
//uri-path.js
import axios from 'axios'
export default {
path: '/uri/path',
async handler (req, res) {
const { data } = await axios.get('http://127.0.0.1:8000/uri/path')
res.setHeader('Content-Type', 'text/html')
res.end(data)
}
}
I'm building an app in Express but I'd like it to call out to S3 to retrieve some keys before the server actually starts up. Is this possible in Express? If I google bootstrap Express I get hits for setting up Express with twitter Bootstrap.
I have used Sails.js before and you could specify bootstrap configurations in a bootstrap.js file so I guess I'm looking for something similar. Otherwise are there alternatives?
I have a index.js file and a separate bin/www file which calls the index.js file. I'd like the bootstrapping done in index.js so that it's included as part of the tests. Right now I 'initialize' the bootstrap but as it's asynchronous the server is already up and running before the bootstrap has complete (or errored out) i.e.
import express from 'express';
import {initializeFromS3} from './services/initializerService';
import healthCheckRouter from './routes/healthCheckRouter';
import bodyParser from 'body-parser';
initializeFromS3(); // Calls out to S3 and does some bootstrapping of configurations
const app = express();
app.use(bodyParser.json()); // to support JSON-encoded bodies
app.use(bodyParser.urlencoded({ // to support URL-encoded bodies
extended: true
}));
// ---------------------------- Routes ----------------------------
app.use('/', express.static('dist/client/'));
app.use('/health-check', healthCheckRouter);
export default app;
Posting my solution for anyone who comes across the same and has a mind blank. I kept the bin/www and index.js files separately but had the express object returned from index.js via a method. Solution below thanks to the friendly people of Github.
Index.js file:
import express from 'express';
import {initialize} from './services/appService';
import healthCheckRouter from './routes/healthCheckRouter';
import loginRouter from './routes/loginRouter';
export function getExpress() {
return initialize()
.then(() => {
const app = express();
// ---------------------------- Routes ----------------------------
app.use('/', express.static('dist/client/'));
app.use('/login', loginRouter);
app.use('/health-check', healthCheckRouter);
return app;
})
}
bin/www file:
import winston from 'winston';
import bodyParser from 'body-parser';
import {getExpress} from '../index';
getExpress()
.then(app => {
app.use(bodyParser.json()); // to support JSON-encoded bodies
app.use(bodyParser.urlencoded({ // to support URL-encoded bodies
extended: true
}));
const port = 3002;
app.listen(port, () => {
winston.info(`Server listening on port ${port}!`);
});
})
.catch(err => {
winston.error('Error starting server', err);
});
Integration tests:
import request from 'supertest';
import {getExpress} from '../../index'
describe('/login integration test', () => {
let app = null;
beforeEach(done => {
getExpress()
.then(res => {
app = res;
done();
});
});
describe('GET /login', () => {
it('should return 400 error if \'app\' is not provided as a query string', done => {
request(app)
.get('/login')
.expect(400, done);
});
});
});