When using this template (and this code below in the API folder, does it completely ignore the nuxt.config.js file? I am running express with Nuxt and it seems this is the case. The config file is completely ignored.

// We instantiate Nuxt.js with the options const isProd = process.env.NODE_ENV === 'production' const nuxt = new Nuxt({ dev: !isProd }) // No build in production if (!isProd) { const builder = new Builder(nuxt) builder.build() } app.use(nuxt.render) app.listen(3000) console.log('Server is listening on http://localhost:3000')

I have used nuxt.js in my project, use nginx as the proxy, but there is a problem，when the amount of visits is very large, 504 errors often occur.

Then I have do a benchmark of the nuxt.js project, here are the report:

# init the project with express-template, the lastest.
vue init nuxt-community/express-template express-nuxt

When the project up, It looks like this:

Jmeter params:

<?xml version="1.0" encoding="UTF-8"?>
<jmeterTestPlan version="1.2" properties="4.0" jmeter="4.0 r1823414">
  <hashTree>
    <TestPlan guiclass="TestPlanGui" testclass="TestPlan" testname="Test Plan" enabled="true">
      <stringProp name="TestPlan.comments"></stringProp>
      <boolProp name="TestPlan.functional_mode">false</boolProp>
      <boolProp name="TestPlan.tearDown_on_shutdown">true</boolProp>
      <boolProp name="TestPlan.serialize_threadgroups">false</boolProp>
      <elementProp name="TestPlan.user_defined_variables" elementType="Arguments" guiclass="ArgumentsPanel" testclass="Arguments" testname="User Defined Variables" enabled="true">
        <collectionProp name="Arguments.arguments"/>
      </elementProp>
      <stringProp name="TestPlan.user_define_classpath"></stringProp>
    </TestPlan>
    <hashTree>
      <ThreadGroup guiclass="ThreadGroupGui" testclass="ThreadGroup" testname="Thread Group" enabled="true">
        <stringProp name="ThreadGroup.on_sample_error">continue</stringProp>
        <elementProp name="ThreadGroup.main_controller" elementType="LoopController" guiclass="LoopControlPanel" testclass="LoopController" testname="Loop Controller" enabled="true">
          <boolProp name="LoopController.continue_forever">false</boolProp>
          <intProp name="LoopController.loops">-1</intProp>
        </elementProp>
        <stringProp name="ThreadGroup.num_threads">200</stringProp>
        <stringProp name="ThreadGroup.ramp_time">1</stringProp>
        <boolProp name="ThreadGroup.scheduler">false</boolProp>
        <stringProp name="ThreadGroup.duration"></stringProp>
        <stringProp name="ThreadGroup.delay"></stringProp>
      </ThreadGroup>
      <hashTree>
        <HTTPSamplerProxy guiclass="HttpTestSampleGui" testclass="HTTPSamplerProxy" testname="HTTP Request" enabled="true">
          <elementProp name="HTTPsampler.Arguments" elementType="Arguments" guiclass="HTTPArgumentsPanel" testclass="Arguments" testname="User Defined Variables" enabled="true">
            <collectionProp name="Arguments.arguments"/>
          </elementProp>
          <stringProp name="HTTPSampler.domain">10.9.34.121</stringProp>
          <stringProp name="HTTPSampler.port">3000</stringProp>
          <stringProp name="HTTPSampler.protocol">http</stringProp>
          <stringProp name="HTTPSampler.contentEncoding"></stringProp>
          <stringProp name="HTTPSampler.path">/</stringProp>
          <stringProp name="HTTPSampler.method">GET</stringProp>
          <boolProp name="HTTPSampler.follow_redirects">true</boolProp>
          <boolProp name="HTTPSampler.auto_redirects">false</boolProp>
          <boolProp name="HTTPSampler.use_keepalive">true</boolProp>
          <boolProp name="HTTPSampler.DO_MULTIPART_POST">false</boolProp>
          <stringProp name="HTTPSampler.embedded_url_re"></stringProp>
          <stringProp name="HTTPSampler.connect_timeout"></stringProp>
          <stringProp name="HTTPSampler.response_timeout"></stringProp>
        </HTTPSamplerProxy>
        <hashTree>
          <ResultCollector guiclass="StatGraphVisualizer" testclass="ResultCollector" testname="Aggregate Graph" enabled="true">
            <boolProp name="ResultCollector.error_logging">false</boolProp>
            <objProp>
              <name>saveConfig</name>
              <value class="SampleSaveConfiguration">
                <time>true</time>
                <latency>true</latency>
                <timestamp>true</timestamp>
                <success>true</success>
                <label>true</label>
                <code>true</code>
                <message>true</message>
                <threadName>true</threadName>
                <dataType>true</dataType>
                <encoding>false</encoding>
                <assertions>true</assertions>
                <subresults>true</subresults>
                <responseData>false</responseData>
                <samplerData>false</samplerData>
                <xml>false</xml>
                <fieldNames>true</fieldNames>
                <responseHeaders>false</responseHeaders>
                <requestHeaders>false</requestHeaders>
                <responseDataOnError>false</responseDataOnError>
                <saveAssertionResultsFailureMessage>true</saveAssertionResultsFailureMessage>
                <assertionsResultsToSave>0</assertionsResultsToSave>
                <bytes>true</bytes>
                <sentBytes>true</sentBytes>
                <threadCounts>true</threadCounts>
                <idleTime>true</idleTime>
                <connectTime>true</connectTime>
              </value>
            </objProp>
            <stringProp name="filename"></stringProp>
          </ResultCollector>
          <hashTree/>
        </hashTree>
      </hashTree>
    </hashTree>
  </hashTree>
</jmeterTestPlan>

The result:

When i use vue-ssr like vue-hackernews-2.0, the same Jmeter params, but the result is very different:

Then I try the express-generator to create a project, express -e, here is the result:

The result is that nuxt.js based vue-ssr is very slow, the Jmeter Throughput is just 320/sec.

Is there something wrong with my benchmark or something what let nuxt.js slow? Need some help!!!

Thanks~

Hello,
I try to use this template but, while instalition i cant sind folder 'server'. What is the reason ?

Hello,
I try to use this template but, while instalition i cant sind folder 'server'. What is the reason ?

I'd like to see if anyone else has had success and whether there's an "official way" to do this. In order to get it working I had to first create an key and cert using the following command

openssl req \
    -newkey rsa:2048 \
    -x509 \
    -nodes \
    -keyout key.pem \
    -new \
    -out cert.pem \
    -subj /CN=localhost \
    -reqexts SAN \
    -extensions SAN \
    -config <(cat /System/Library/OpenSSL/openssl.cnf \
        <(printf '[SAN]\nsubjectAltName=DNS:localhost')) \
    -sha256 \
    -days 3650

Then I created a server.js file in the project with the following code

const { Nuxt, Builder } = require('nuxt');
const app = require('express')();
const http = require('http');
const https = require('https');
const fs = require('fs-extra');

let server;

const isProd = (process.env.NODE_ENV === 'production');
const port = process.env.PORT || 3000;

// Prepare for HTTP or HTTPS
if (process.env.NODE_ENV !== 'production') {
  const pkey = fs.readFileSync('./key.pem');
  const pcert = fs.readFileSync('./cert.pem');
  const httpsOptions = {
    key: pkey,
    cert: pcert,
  };
  server = https.createServer(httpsOptions, app);
} else {
  server = http.createServer(app);
}

// We instantiate nuxt.js with the options
const config = require('./nuxt.config.js');

config.dev = !isProd;
const nuxt = new Nuxt(config);

// Render every route with Nuxt.js
app.use(nuxt.render);

function listen() {
  // Listen the server
  // app.listen(port, '0.0.0.0');
  server.listen(port, 'localhost');
  console.log(`Server listening on localhost:${port}.`);
}

// Build only in dev mode with hot-reloading
if (config.dev) {
  new Builder(nuxt).build()
    .then(listen)
    .catch((error) => {
      console.error(error);
      process.exit(1);
    });
} else {
  listen();
}

And finally I changed the npm run dev command from nuxt to NODE_ENV=development node server.js in package.json

When you run dev for the first time it'll say the site isn't secure when you go to https://localhost:3000. I used the following instructions to allow the cert.pem file to be trusted by my machine: https://stackoverflow.com/questions/7580508/getting-chrome-to-accept-self-signed-localhost-certificate#answer-15076602

Is there any reason not to do it this way? If so, what's the best way? Thanks!

Unfortunately, When I handled the function of uploading the picture, I found a problem here, I don't know which folder should be uploaded, because I had uploaded picture in a folder, but can't access it with URL.
I've tried the static folder, still cannot be accessed.
I hope to help me, thanks very much!

rt, when I excute "npm install", and run dev, It's show

But when I change some data, hot reloading not work

 ERROR  Nuxt error

  Error: /blog/api/routes/index.js:1
  (function (exports, require, module, __filename, __dirname) { import { Router   } from 'express'
                                                                ^^^^^^
  SyntaxError: Unexpected token import

import { Router } from 'express'
import blog from './blog'
const router = Router()

router.use(blog)

export default router

With the previous version of the template (the one where nuxt was used as an Express middleware) I managed to include Mogoose connection code in server/index.js so it was activated when Express server listen() method was invoked.

With the new configuration relying on serverMiddleware I cannot think of a place to inject Mongoose initialization code because there is no explicit place related to connection setup.

Also, where would I change default port number 3000 to something else if I need to? In the previous edition it was a pretty obvious place in server/index.js file.

How i can add connection with mongoose in this project?
I tried to do it, but I can not understand how to make both connections.
I'll be glad if you help me with this

import { Nuxt, Builder } from 'nuxt'
import express from 'express'
const bodyParser = require('body-parser')
const cors = require('cors')
const morgan = require('morgan')
const mongoose = require('mongoose')
const config = require('./config/config')
mongoose.Promise = global.Promise

const app = express()
const host = process.env.HOST || '127.0.0.1'
const port = process.env.PORT || 3000

app.use(morgan('combined'))
app.use(bodyParser.json())
app.use(cors())
app.use(require('./routes/users'))

mongoose.connect(config.dbURL)

let nuxtConfig = require('../nuxt.config.js')
config.dev = !(process.env.NODE_ENV === 'production')

const nuxt = new Nuxt(nuxtConfig)

if (config.dev) {
  const builder = new Builder(nuxt)
  builder.build()
}
app.set('port', port)
app.use(nuxt.render)

mongoose.connection
  .once('open', () => {
    console.log(`Mongoose - successful connection ...`)
    app.listen(config.port,
      () => console.log(`Server start on port ${config.port} ...`))
  })
  .on('error', error => console.warn(error))

config.js

module.exports = {
  port: 8081,
  dbURL: 'mongodb://localhost/data'
}

vue init nuxt-community/express-template stars

? Project name stars
? Project description Nuxt.js project
? Author orassr orassraf@gmail.com

vue-cli · Generated "stars".

To get started:

 cd stars
 npm install # Or yarn
 npm run dev

C:\Users\orass\Desktop\LearnVue.js>cd stars

C:\Users\orass\Desktop\LearnVue.js\stars>npm install

[email protected] postinstall C:\Users\orass\Desktop\LearnVue.js\stars\nodemodules\webpack\nodemodules\uglifyjs-webpack-plugin
node lib/post_install.js

[email protected] postinstall C:\Users\orass\Desktop\LearnVue.js\stars\node_modules\nodemon
node bin/postinstall || exit 0

[email protected] postinstall C:\Users\orass\Desktop\LearnVue.js\stars\node_modules\nuxt
opencollective postinstall || exit 0

 *** Thank you for using nuxt! ***

Please consider donating to our open collective
to help us maintain this package.

https://opencollective.com/nuxtjs/donate

                ***

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN [email protected] requires a peer of [email protected]^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 1223 packages from 694 contributors in 16.975s
[+] no known vulnerabilities found [14103 packages audited]

C:\Users\orass\Desktop\LearnVue.js\stars>npm run dev

[email protected] dev C:\Users\orass\Desktop\LearnVue.js\stars
backpack dev

DONE Compiled successfully in 921ms 14:05:21

Server listening on 127.0.0.1:3000
████████████████████ 100%

Build completed in 2.64s

ERROR Failed to compile with 6 errors 14:05:25

error in ./layouts/default.vue

Module build failed: Error: No parser and no file path given, couldn't infer a parser.
at normalize (C:\Users\orass\Desktop\LearnVue.js\stars\nodemodules\prettier\index.js:7051:13) at formatWithCursor (C:\Users\orass\Desktop\LearnVue.js\stars\nodemodules\prettier\index.js:10370:12)
at C:\Users\orass\Desktop\LearnVue.js\stars\nodemodules\prettier\index.js:31115:15 at Object.format (C:\Users\orass\Desktop\LearnVue.js\stars\nodemodules\prettier\index.js:31134:12)
at Object.module.exports (C:\Users\orass\Desktop\LearnVue.js\stars\node_modules\vue-loader\lib\template-compiler\index.js:80:23)

@ ./layouts/default.vue 11:0-370
@ ./.nuxt/App.js
@ ./.nuxt/index.js
@ ./.nuxt/client.js
@ multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/_webpackhmr ./.nuxt/client.js

error in ./layouts/error.vue

Module build failed: Error: No parser and no file path given, couldn't infer a parser.
at normalize (C:\Users\orass\Desktop\LearnVue.js\stars\nodemodules\prettier\index.js:7051:13) at formatWithCursor (C:\Users\orass\Desktop\LearnVue.js\stars\nodemodules\prettier\index.js:10370:12)
at C:\Users\orass\Desktop\LearnVue.js\stars\nodemodules\prettier\index.js:31115:15 at Object.format (C:\Users\orass\Desktop\LearnVue.js\stars\nodemodules\prettier\index.js:31134:12)
at Object.module.exports (C:\Users\orass\Desktop\LearnVue.js\stars\node_modules\vue-loader\lib\template-compiler\index.js:80:23)

@ ./layouts/error.vue 11:0-367
@ ./.nuxt/index.js
@ ./.nuxt/client.js
@ multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/_webpackhmr ./.nuxt/client.js

error in ./.nuxt/components/nuxt-loading.vue

Module build failed: Error: No parser and no file path given, couldn't infer a parser.
at normalize (C:\Users\orass\Desktop\LearnVue.js\stars\nodemodules\prettier\index.js:7051:13) at formatWithCursor (C:\Users\orass\Desktop\LearnVue.js\stars\nodemodules\prettier\index.js:10370:12)
at C:\Users\orass\Desktop\LearnVue.js\stars\nodemodules\prettier\index.js:31115:15 at Object.format (C:\Users\orass\Desktop\LearnVue.js\stars\nodemodules\prettier\index.js:31134:12)
at Object.module.exports (C:\Users\orass\Desktop\LearnVue.js\stars\node_modules\vue-loader\lib\template-compiler\index.js:80:23)

@ ./.nuxt/components/nuxt-loading.vue 11:0-381
@ ./.nuxt/App.js
@ ./.nuxt/index.js
@ ./.nuxt/client.js
@ multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/_webpackhmr ./.nuxt/client.js

error in ./pages/index.vue

Module build failed: Error: No parser and no file path given, couldn't infer a parser.
at normalize (C:\Users\orass\Desktop\LearnVue.js\stars\nodemodules\prettier\index.js:7051:13) at formatWithCursor (C:\Users\orass\Desktop\LearnVue.js\stars\nodemodules\prettier\index.js:10370:12)
at C:\Users\orass\Desktop\LearnVue.js\stars\nodemodules\prettier\index.js:31115:15 at Object.format (C:\Users\orass\Desktop\LearnVue.js\stars\nodemodules\prettier\index.js:31134:12)
at Object.module.exports (C:\Users\orass\Desktop\LearnVue.js\stars\node_modules\vue-loader\lib\template-compiler\index.js:80:23)

@ ./pages/index.vue 11:0-367
@ ./.nuxt/router.js
@ ./.nuxt/index.js
@ ./.nuxt/client.js
@ multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/_webpackhmr ./.nuxt/client.js

error in ./pages/_id.vue

Module build failed: Error: No parser and no file path given, couldn't infer a parser.
at normalize (C:\Users\orass\Desktop\LearnVue.js\stars\nodemodules\prettier\index.js:7051:13) at formatWithCursor (C:\Users\orass\Desktop\LearnVue.js\stars\nodemodules\prettier\index.js:10370:12)
at C:\Users\orass\Desktop\LearnVue.js\stars\nodemodules\prettier\index.js:31115:15 at Object.format (C:\Users\orass\Desktop\LearnVue.js\stars\nodemodules\prettier\index.js:31134:12)
at Object.module.exports (C:\Users\orass\Desktop\LearnVue.js\stars\node_modules\vue-loader\lib\template-compiler\index.js:80:23)

@ ./pages/id.vue 11:0-365 @ ./.nuxt/router.js @ ./.nuxt/index.js @ ./.nuxt/client.js @ multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/webpackhmr ./.nuxt/client.js

error in ./components/Footer.vue

Module build failed: Error: No parser and no file path given, couldn't infer a parser.
at normalize (C:\Users\orass\Desktop\LearnVue.js\stars\nodemodules\prettier\index.js:7051:13) at formatWithCursor (C:\Users\orass\Desktop\LearnVue.js\stars\nodemodules\prettier\index.js:10370:12)
at C:\Users\orass\Desktop\LearnVue.js\stars\nodemodules\prettier\index.js:31115:15 at Object.format (C:\Users\orass\Desktop\LearnVue.js\stars\nodemodules\prettier\index.js:31134:12)
at Object.module.exports (C:\Users\orass\Desktop\LearnVue.js\stars\node_modules\vue-loader\lib\template-compiler\index.js:80:23)

@ ./components/Footer.vue 6:0-369
@ ./nodemodules/babel-loader/lib?{"babelrc":false,"cacheDirectory":true,"presets":[["C://Users//orass//Desktop//LearnVue.js//stars//nodemodules//babel-preset-vue-app//dist//index.common.js",{"targets":{"ie":9,"uglify":true}}]]}!./nodemodules/vue-loader/lib/selector.js?type=script&index=0!./layouts/default.vue @ ./layouts/default.vue @ ./.nuxt/App.js @ ./.nuxt/index.js @ ./.nuxt/client.js @ multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/webpackhmr ./.nuxt/client.js

Hi I have already tried many ways of doing this, but always get the same error:

• "export 'User' was not found in '@/accessers/ac_user.js'

@/accessers/ac_user.js

import fireconf from '~/firebase_conf.json';

module.exports = {
  User: (type, value) => {
    switch (type) {
      case 'uid':
        return axios.get(fireconf.getuser.uid.url);
      case 'email':
        return axios.get(fireconf.getuser.email.url);
    }
  }
}

Index.vue

import {User} from '@/accessers/ac_user.js';

nuxt.config.js

  modules: [
    '~/accessers/ac_user.js'
  ],

Also I have included in package.json the "babel-polyfill", because that's supposed to help. (it didn't)

Am I missing something?

How to debug a breakpoint in webstrom?

How do I debug the server-side code?

When I extend the router through my nuxt.config.js like this:

const router = require(`./routes/${currentRegion}`);

module.exports = {
   router: {
    ...router,
    scrollBehavior() {
      return { x: 0, y: 0 };
    },
  },

  ...
}

I get the following error:

 warning  in ./routes/nz/faq.vue

Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
|   <section>
|     <header>

 @ ./routes ^\.\/.*$
 @ ./nuxt.config.js
 @ ./server/index.js

g…]()

I am placing nuxt behind a password protected area which is done via passport.js and express-session. The authentication mechanism is made through serverMiddleware in nuxt and seems to be working. Unfortunately my _nuxt assets are broken due to the change of path. How can i fix this? Please be aware that all content, including static files should be in the new path which is completely closed from unauthenticated users.

Simply put i use app.use('/protected', nuxt.render)

using the template, and the pages/admin.vue looks like:

...
import ArHeader from '~/components/ar-header.vue';
...

and the components/ar-header.vue looks like:

...
import logger from '~/mixins/logger';
...

and the mixins/logger.js looks like:

...
export default {
  // ...
};
...

while building files, the path ~/components and ~/mixins just cannot be resolved.