0

I would like to integrate express app that generated with express generator into my nuxt.js application.

I found one https://github.com/nuxt-community/express-template but its integrated only simple express application.

Can anyone give me proper tutorial for express application (generated with express generator) with nuxt.js

1 Answer 1

5

I add NUXT to my Express.js Application recently, here is my setup example.

https://github.com/iampaul83/express-nuxt

NUXT.js x Express.js

1. express generator and install nuxt

# express generator
npx express-generator --pug --git express-nuxt
cd express-nuxt
yarn

# nuxt
yarn add nuxt @nuxtjs/axios
yarn add --dev eslint babel-eslint eslint-friendly-formatter eslint-loader eslint-plugin-vue

2. add nuxt folders

  • nuxt
    • assets
    • components
    • layouts
    • middleware
    • pages
    • plugins
    • static
    • store

3. create nuxt.config.js

srcDir option is required if you want to place nuxt in a sub folder

module.exports = {
  mode: 'universal',

  srcDir: __dirname,
  /*
  ** Headers of the page
  */
  head: {
    title: 'nuxt',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Nuxt.js project' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  /*
  ** Customize the progress bar color
  */
  loading: { color: '#3B8070' },

  modules: [
    // Doc: https://github.com/nuxt-community/axios-module#usage
    '@nuxtjs/axios'
  ],

  /*
  ** Axios module configuration
  */
  axios: {
    // See https://github.com/nuxt-community/axios-module#options
  },

  /*
  ** Build configuration
  */
  build: {
    /*
    ** Run ESLint on save
    */
    extend (config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  }
}

4. create nuxt-render.js for render

const { Nuxt, Builder } = require('nuxt')

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

const nuxt = new Nuxt(config)

// build nuxt
if (config.dev) {
    const builder = new Builder(nuxt)
    builder.build().catch((error) => {
        console.log('failed to build nuxt')
        console.log(error)
    })
}

module.exports = nuxt.render

5. add nuxt render middleware in app.js

app.use(require('./nuxt/nuxt-render'));

6. add .eslintrc.js

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  parserOptions: {
    parser: 'babel-eslint'
  },
  extends: [
    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
    'plugin:vue/essential',
  ],
  // required to lint *.vue files
  plugins: [
    'vue'
  ],
  // add your custom rules here
  rules: {}
}

7. add .gitignore for nuxt

# Nuxt build
.nuxt

# Nuxt generate
dist
Sign up to request clarification or add additional context in comments.

4 Comments

Let me try your method
@Paul Tsai you seem the right person who can help me on this one: stackoverflow.com/questions/54982462/…
@SylvainF ok, let me try
@PaulTsai Why would you only want to build in dev env? If you set config.dev to false Builder will start production build. If I don't build my app first it can't be served or am I wrong?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.