Is it possible to share variable between renderer and serverside?

[Psycokwet]

Hello !

I have some constantes, that I use as keys for ipc, and that I need in the server side as well as the renderer side, since the ipc key must be the same from both side to communicate.

Until now I copy paste, It's note pretty, I have one file with all my key in the front side, and the same thing in the server side. Is there a way to avoid this duplication?

Thank you !

[luker2]

@saltyshiomix could you please take a look at this one? I asked a similar question at #153. I think it's a frequent-enough request to possibly work out-of-the-box with nextron? I'd love to provide a PR but my knowledge of this project & webpack are pretty slim. Thanks!

[Psycokwet]

Arf, I didn't find the others oppened issues about it, sorry ! If it can help, for now I just did a small copy pasting script that copy my files from a folder in the back, to a folder in the front each time I launch dev or build.

I'm not good at all with webpack or things like that yet. :/

[hypernova7]

You can use dotenv and create an .env file in the root project.

Project/
+-- .env
+-- package.json
+-- main/
│  +-- background.js
+-- renderer/
│  +-- pages/
│  │ +-- home.js

You can use it the next way npm install dotenv or yarn add dotenv

.env file

MY_ENV=value
API_KEY=1234567890abcdef

background.js

import { config } from 'dotenv';
config({
  path: '../.env' // set relative path to .env file on root project
})
const {
  MY_ENV,
  API_KEY
} = process.env

In next.config.js you can use DefinePlugin. I recommend you install webpack: npm install webpack or yarn add webpack

// Always add dotenv on top
require('dotenv').config({
  path: '../.env' // set relative path to .env file on root project
})
const { DefinePlugin } = require('webpack')

module.exports = {
  webpack(config) {
    config.plugins.push(
      new DefinePlugin({
        'process.env': {
          MY_ENV,
          API_KEY
        }
      })
    )
    return config
  }
}

home.js

const {
  MY_ENV,
  API_KEY
} = process.env

console.log(MY_ENV) 

[alexis-piquet]

Sure you can, try it :)

[saltyshiomix]

Related: https://github.com/saltyshiomix/nextron/issues/188

[m5x5]

You can use dotenv and create an .env file in the root project.

Project/
+-- .env
+-- package.json
+-- main/
│  +-- background.js
+-- renderer/
│  +-- pages/
│  │ +-- home.js

You can use it the next way npm install dotenv or yarn add dotenv

.env file

MY_ENV=value
API_KEY=1234567890abcdef

background.js

import { config } from 'dotenv';
config({
  path: '../.env' // set relative path to .env file on root project
})
const {
  MY_ENV,
  API_KEY
} = process.env

In next.config.js you can use DefinePlugin. I recommend you install webpack: npm install webpack or yarn add webpack

// Always add dotenv on top
require('dotenv').config({
  path: '../.env' // set relative path to .env file on root project
})
const { DefinePlugin } = require('webpack')

module.exports = {
  webpack(config) {
    config.plugins.push(
      new DefinePlugin({
        'process.env': {
          MY_ENV,
          API_KEY
        }
      })
    )
    return config
  }
}

home.js

const {
  MY_ENV,
  API_KEY
} = process.env

console.log(MY_ENV) 

What if we internally checked for an .env file and loaded it into both processes with this script? IMO, this would save a lot of time, and I can't imagine many side effects that might happen. In case someone complains with it happening automatically we could allow a switch i.e. disableEnvLoading.