Live site is running in development mode ๐Ÿ˜…

Hi

Hoping someone might be able to help me out here

We have a site that has been up for about a week or so now. When I check the dev tools in Chrome, I am getting a message saying You are running Vue in development mode., and I am seeing all error/debug messages, which I believe is not supposed to be the case.

From what I can see, the site is running in SSR mode, with the service worker running, so seems like it is in production. We are using the Codeship to handle our deploys, but it is just using the built-in yarn install and yarn build commands, so should be building in production mode from what I can see.

Does anyone have any idea why this might be happening, or if it sounds like there is a step we have missed for this?

Looking in the deploy logs, I am seeing this message:

WARNING: NODE_ENV value of 'production' did not match any deployment config file names.

Iโ€™m gonna guess that might have something to do with it?

Hi! Make sure you start the app the way we recommend in package.json:

    "start": "cross-env NODE_ENV=production TS_NODE_PROJECT=\"tsconfig-build.json\" pm2 start ecosystem.json $PM2_ARGS",

Hi

Thanks for the reply

Our package.json file is exactly the same as the default

The issue it seems is that we didnโ€™t have config/production.json, so we have copied our local.json file and the build error seems to have disappeared, though we havenโ€™t deployed to see if itโ€™s had any effects yet.

Does this sound like a step that is required? We couldnโ€™t see anything in the build docs specifying this, it just says you need a local.json file :thinking:

Hi, good point. Yeah this step should be added to the docs @kkdg can you take care of this please?

Awesome!

So, just to clarify - we should have a file called config/production.js that should be an exact copy of the local.json file?

Yes, I guess this is the solution here

Hi again

Sorry to re-open this, but it seems like our site is still in development mode.

I am probably missing something really obvious here, but Iโ€™m not sure what it is - when we do a deploy, we:

  • Copy the config/local.json to config/production.json
  • Do a yarn && yarn build
  • we then do a yarn start

The contents of our package.json scripts are:

{
"scripts": {
    "start": "cross-env NODE_ENV=production TS_NODE_PROJECT=\"tsconfig-build.json\" pm2 start ecosystem.json $PM2_ARGS",
    "installer": "node ./core/scripts/installer",
    "installer:ci": "yarn installer --default-config",
    "all": "cross-env NODE_ENV=development node ./core/scripts/all",
    "cache": "node ./core/scripts/cache",
    "dev": "cross-env TS_NODE_PROJECT=\"tsconfig-build.json\" ts-node ./core/scripts/entry.ts",
    "dev:sw": "cross-env TS_NODE_PROJECT=\"tsconfig-build.json\" yarn build:sw && yarn dev",
    "dev:inspect": "cross-env TS_NODE_PROJECT=\"tsconfig-build.json\" node --inspect -r ts-node/register ./core/scripts/entry",
    "build:sw": "cross-env NODE_ENV=production TS_NODE_PROJECT=\"tsconfig-build.json\" webpack --config ./core/build/webpack.prod.sw.config.ts --mode production --progress --hide-modules",
    "build:client": "cross-env NODE_ENV=production TS_NODE_PROJECT=\"tsconfig-build.json\" webpack --config ./core/build/webpack.prod.client.config.ts --mode production --progress --hide-modules",
    "build:server": "cross-env NODE_ENV=production TS_NODE_PROJECT=\"tsconfig-build.json\" webpack --config ./core/build/webpack.prod.server.config.ts --mode production --progress --hide-modules",
    "build": "rimraf dist && yarn build:client && yarn build:server && yarn build:sw",
    "test:unit": "jest -c test/unit/jest.conf.js",
    "test:e2e": "cypress open",
    "test:e2e:ci": "cypress run",
    "lint": "eslint --ext .js,.vue core src",
    "lerna": "lerna",
    "now-build": "yarn && rimraf dist && yarn build:client && yarn build:server && yarn build:sw"
  },
}

Iโ€™m really not sure what it is that I am missing, if anyone is able to help out that would be really appreciated

Oh for gods sake I really need to stop doing this.

So, I found the problem. This may or may not get me a bit of a telling off, howeverโ€ฆ

On our site, we have lots of pages that are populated by Magentos blocks etc. We wanted a way to allow people to add Vue components into Magento, and have them convert on the front end, so in the CMS, someone can head:

<vue-header>I am a vue component</vue-header>

That would then load the VueHeader component into the page etc.

I canโ€™t for the live of me find the link for the guide, however it said you had to do 3 things:

  1. Generate your content and return it to vue like this:
return {
          template: `<div>${str}</div>`
        }
  1. Turn on the runtime compiler:
module.exports = {
  runtimeCompiler: true
}
  1. Create an alias for vue in your webpack config:
{
resolve: {
    alias: {
      'create-api': './create-api-client.js',
      'vue': 'vue/dist/vue.js',
    }
  },

Now, the issue here is that my alias was pointing to the full version of vue, not the minified version. So, whilst the site is being built in production mode, the version of vue will always be development, hence the issue

Again, so sorry for this - if there is a better way of approaching the above scenario, I would love to hear it, but for now please consider this closed!

Hi Mike sorry for late response. Itโ€™s pretty specific issue and itโ€™s hard for me to advise you anything more that you already wrote. @FilipRakowski might know the answer/a better way?

sure thing. thanks for pointing it out.