Nuxt.js: Exclude nuxtServerInit from client bundles?

[SkaterDad]

Is there a recommended way to exclude nuxtServerInit code from the client bundle?

I'm using that function to decrypt a cookie which uses iron to prepopulate my user's session data,, and that brings with it a whole host of Node dependencies. Many of those deps are written ES6, so uglifyjs throws errors and can't eliminate the code.

I think it would be a good idea to prevent that code from being sent to the client, since in this and presumably other cases, it leaks info about the backend to the client.

My current thought was to spilt my nuxtServerInit code into a new file, and somehow configure webpack to import a fake version of it when building the client bundles.

_{This question is available on Nuxt.js community (#c754)}

[pi0]

You can use webpack alias for that. For example with nuxt-hn we did this to split firebase from client and server bundles:
https://github.com/nuxt/hackernews/blob/master/nuxt.config.js#L4
https://github.com/nuxt/hackernews/blob/master/api/index.js#L2

[SkaterDad]

Thanks for the quick reply! I'll give that a when I get a chance.

[awronski]

@pi0 I have the same problem. In the nuxtServerInit I use keys to sign cookies.
I don't want this code in the client.

I try your solution but it is not working for me.

nuxt.config.js:

  build: {
    extend (config, { isClient }) {
      config.resolve.alias['initCookies'] = `./initCookies${isClient ? 'Client' : 'Server'}.js`
    }
  }

.store directory:

index.js
initCookiesClient.js    <-- empty functions
initCookiesServer.js   <-- real logic

and the store:

import { collectData, updateCookie } from 'initCookies'

const createStore = () => new Vuex.Store({
[...]
    async nuxtServerInit ({ state, commit }, { route, req, res, env }) {
      const visitor = collectData(route, req, res)
      updateCookie(visitor, req, res)
      commit('setUpData', visitor)
    },
[...]
})

But when I build the app webpack generates nuxt.bundle.xxxxxxxxxxxxxxx.js that contain both real and fake code :(

Any sugestions?

[SkaterDad]

I ran into the same problem initially. It turns out that you need to move
your sensitive code to another directory. Anything in the store directory
gets added to the nuxt bundle.

On Sat, Jun 17, 2017, 9:55 AM awronski [e-mail] wrote:

@pi0 https://github.com/pi0 I have the same problem. In the
nuxtServerInit I use keys to encrypt/decrypt cookies.
I don't want this code in the client.

I try your solution but it is not working for me.

nuxt.config.js:

build: {
extend (config, { isClient }) {
config.resolve.alias['initCookies'] = ./initCookies${isClient ? 'Client' : 'Server'}.js
}
}

.store directory:

index.js
initCookiesClient.js <-- empty functions
initCookiesServer.js <-- real logic

and the store:

import { collectData, updateCookie } from 'initCookies'

const createStore = () => new Vuex.Store({
[...]
async nuxtServerInit ({ state, commit }, { route, req, res, env }) {
const visitor = collectData(route, req, res)
updateCookie(visitor, req, res)
commit('setUpData', data)
},
[...]
})

But when I build the app webpack generates nuxt.bundle.xxxxxxxxxxxxxxx.js
that contain both real and fake code :(

Any sugestions?

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/nuxt/nuxt.js/issues/884#issuecomment-309219791, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AMpDr4vdzSr6Kov4jjOCSX5m8hjxqXKAks5sE-jEgaJpZM4N41l1
.

[pi0]

@SkaterDad You are right. That is because things inside store are scanned and reserved for store modules nothing else. Would be nice mentioning that Tip in docs too :)

[awronski]

Thank you Guys! You are amazing. It is working :)

[uptownhr]

@pi0 thoughts on moving nuxtserverinit out of the store?

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.