set dev server url during webpack build instead of env variable

Author: nklayman

README.md

@@ -200,6 +200,6 @@ The build command consists of three main phases: render build, main build, and e
 
 The serve command also consists of 3 main phases: main build, dev server launch, and electron launch:
 
-1.  Main build: This phase, like in the build command, bundles your app's main process, but in development mode.
-2.  Dev server launch: This phase starts the built in dev server with a few modifications to work properly with electron.
+1.  Dev server launch: This phase starts the built in dev server with a few modifications to work properly with electron.
+2.  Main build: This phase, like in the build command, bundles your app's main process, but in development mode.
 3.  Electron launch: This phase launches electron and tells it to load the url of the above dev server.

__tests__/commands.spec.js

@@ -289,8 +289,6 @@ describe('testWithSpectron', async () => {
     // Proper url is returned
     expect(url).toBe('http://localhost:1234/')
     const appArgs = Application.mock.calls[0][0]
-    // Spectron is launched with proper url
-    expect(appArgs.env.WEBPACK_DEV_SERVER_URL).toBe('http://localhost:1234/')
     // Spectron is launched with proper path to background
     expect(appArgs.args).toEqual(['customOutput/background.js'])
   })

__tests__/serve.helper.js

@@ -8,20 +8,14 @@ portfinder.basePort = 9515
 const serve = (project, notifyUpdate) =>
   new Promise((resolve, reject) => {
     const child = project.run('vue-cli-service serve:electron')
-    let isFirstMatch = true
     let log = ''
     child.stdout.on('data', async data => {
       data = data.toString()
       log += data
       try {
-        const urlMatch = data.match(/http:\/\/[^/]+\//)
-        if (urlMatch && isFirstMatch) {
-          isFirstMatch = false
-          let url = urlMatch[0]
-
+        if (data.match(/Launching Electron\.\.\./)) {
           resolve({
             stdout: log,
-            url,
             stopServe: () => {
               child.stdin.write('close')
             }
@@ -46,14 +40,13 @@ const runTests = useTS =>
     //   Prevent electron from being launched
     jest.mock('execa')
     //   Wait for dev server to start
-    const { stopServe, url } = await serve(project)
+    const { stopServe } = await serve(project)
     expect(project.has('dist_electron/background.js')).toBe(true)
     // Launch app with spectron
     const app = new Application({
       path: electronPath,
       args: [projectPath('dist_electron/background.js')],
       env: {
-        WEBPACK_DEV_SERVER_URL: url,
         IS_TEST: true
       },
       cwd: projectPath(''),

index.js

@@ -229,59 +229,60 @@ module.exports = (api, options) => {
           .options({ transpileOnly: !mainProcessTypeChecking })
       }
 
-      //   Build the main process
-      const bundle = webpack(mainProcessChain(mainConfig).toConfig())
-      console.log('Bundling main process:\n')
-      bundle.run((err, stats) => {
-        if (err) {
-          console.error(err.stack || err)
-          if (err.details) {
-            console.error(err.details)
+      console.log('\nStarting development server:\n')
+      // Run the serve command with custom webpack config
+      serve(
+        {
+          _: [],
+          // Use dashboard if called from ui
+          dashboard: args.dashboard,
+          // Serve in development mode if launched in headless mode
+          mode: args.headless && !args.forceDev ? 'production' : 'development'
+        },
+        api,
+        options,
+        rendererConfig
+      ).then(server => {
+        // Set dev server url
+        mainConfig
+          .plugin('env')
+          .tap(args => [{ ...args, WEBPACK_DEV_SERVER_URL: server.url }])
+        //   Build the main process
+        const bundle = webpack(mainProcessChain(mainConfig).toConfig())
+        console.log('Bundling main process:\n')
+        bundle.run((err, stats) => {
+          if (err) {
+            console.error(err.stack || err)
+            if (err.details) {
+              console.error(err.details)
+            }
+            process.exit(1)
           }
-          process.exit(1)
-        }
 
-        const info = stats.toJson()
+          const info = stats.toJson()
 
-        if (stats.hasErrors()) {
-          console.error(info.errors)
-          process.exit(1)
-        }
+          if (stats.hasErrors()) {
+            console.error(info.errors)
+            process.exit(1)
+          }
 
-        if (stats.hasWarnings()) {
-          console.warn(info.warnings)
-        }
+          if (stats.hasWarnings()) {
+            console.warn(info.warnings)
+          }
 
-        console.log(
-          stats.toString({
-            chunks: false,
-            colors: true
-          })
-        )
-        console.log('\nStarting development server:\n')
-        // Run the serve command with custom webpack config
-        serve(
-          {
-            _: [],
-            // Use dashboard if called from ui
-            dashboard: args.dashboard,
-            // Serve in development mode if launched in headless mode
-            mode: args.headless && !args.forceDev ? 'production' : 'development'
-          },
-          api,
-          options,
-          rendererConfig
-        ).then(server => {
+          console.log(
+            stats.toString({
+              chunks: false,
+              colors: true
+            })
+          )
           if (args.debug) {
             //   Do not launch electron and provide instructions on launching through debugger
             console.log(
               'Not launching electron as debug argument was passed. You must launch electron though your debugger.'
             )
             console.log(
-              `Make sure to set the WEBPACK_DEV_SERVER_URL env variable to ${
-                server.url
-              }
-              And IS_TEST to true`
+              `If you are using Spectron, make sure to set the IS_TEST env variable to true.`
             )
             console.log(
               'Learn more about debugging the main process at https://github.com/nklayman/vue-cli-plugin-electron-builder#debugging.'
@@ -302,8 +303,6 @@ module.exports = (api, options) => {
                 stdio: 'inherit',
                 env: {
                   ...process.env,
-                  // Give the main process the url to the dev server
-                  WEBPACK_DEV_SERVER_URL: server.url,
                   // Disable electron security warnings
                   ELECTRON_DISABLE_SECURITY_WARNINGS: true
                 }

lib/testWithSpectron.js

@@ -43,10 +43,6 @@ module.exports = (options = {}) =>
             // Apply user options
             ...options.spectronOptions
           }
-          if (!spectronOptions.env.WEBPACK_DEV_SERVER_URL) {
-            // Make sure dev server url is set
-            spectronOptions.env.WEBPACK_DEV_SERVER_URL = url
-          }
 
           // Launch app with spectron
           app = new Application(spectronOptions)