Home

Hi, this is an weird issue I’m facing. While developing everything works fine. I get data from API, axios can fetch it as well. But after doing the build I’m getting 404 for API. Even the page doesn’t show.

My git link

Please help

nuxt.config.js

const isDev = require('isdev');
const cfg = require('config');
const path = require('path');

module.exports = {
    srcDir: cfg.get('paths.app.client'),
    buildDir: cfg.get('paths.dist.client'),
    rootDir: './',
    dev: isDev,
    head: {
        title: 'Smonyx 1.0',
        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'
        }]
    },
    css: ['normalize.css'],
    loading: {
        color: '#3B8070'
    },
    build: {
        vendor: [],
        postcss: {
            plugins: {
                'postcss-partial-import': {},
                'postcss-crip': {},
                'postcss-nested-props': {},
                'postcss-map': {
                    basePath: path.resolve(__dirname, 'styleVars'),
                    maps: ['fonts.yml', 'colors.yml']
                },
                'postcss-mixins': {},
                'postcss-advanced-variables': {},
                'postcss-short': {},
                'postcss-cssnext': {
                    browsers: ['last 5 versions', 'Opera 12.1', 'safari >= 8', 'ie >= 10', 'ff >= 20', 'ios 6', 'android 4', 'ie >= 9'],
                    features: {
                        nesting: false
                    }
                },
                'postcss-nested': {},
                'postcss-ref': {},
                'postcss-property-lookup': {},
                'postcss-utilities': {},
                'rucksack-css': {},
                'postcss-extend': {},
                'postcss-merge-rules': {},
                'css-mqpacker': {}
            }
        }
    },
    modules: ['@nuxtjs/axios'],
    axios: {
        // baseUrl: 'http://localhost:' + cfg.get('server.port') // eslint-disable-line
    }
};

Server config

import convert from 'koa-convert';
import cors from 'kcors';
import bodyParser from 'koa-body';
import session from 'koa-session';
import helmet from 'koa-helmet';
import config from 'config';
import serve from 'koa-static';
import mount from 'koa-mount';

import { cModules, cMiddleware } from '../app';
import { catchErr, statusMessage } from './errorConfig';
import nuxtConfig from './nuxtConfig';

function baseConfig(app, io) {
  app.keys = config.get('secret');
  app.proxy = true;

  app.use(mount('/static', serve(config.get('paths.static'))));

  app.use(convert.compose(
    catchErr,
    cors({
      credentials: true,
      origin: true
    }),
    bodyParser({
      multipart: true,
      formLimit: '200mb'
    }),
    session({
      maxAge: 21600000
    }, app),
    helmet(),
    statusMessage
  ));

  cModules(app, io);
  app.use(cMiddleware());

  if (config.get('nuxtBuild')) {
    nuxtConfig(app);
  }
}

export default baseConfig;

Nuxt config

import { Nuxt, Builder } from 'nuxt';
import koaConnect from 'koa-connect';
import isDev from 'isdev';
import config from '../../../nuxt.config';

async function nuxtConfig(app) {
  const nuxt = new Nuxt(config);

  if (isDev) {
    await new Builder(nuxt).build();
  }
  const nuxtRender = koaConnect(nuxt.render);

  app.use(async (ctx, next) => {
    await next();
    ctx.status = 200;
    ctx.req.session = ctx.session;
    await nuxtRender(ctx);
  });
}

export default nuxtConfig;