fix: CTA cache and vite build (#1806)

* use file as version for local links

this also makes it closer to the production version and less likely to accidentally introudce an issue

* always install latest without asking

* work around issues with esbuild installing properly

* test shouldn't run build-release on the cli

* build cli.js and api outside of the test

* try test on windows

* change file

* switch back to linux test

* -y prompt not available on npm@6, remove

* pipe

Author: jbolda

.changes/cta-vite-esbuild-install-direct.md

@@ -0,0 +1,5 @@
+---
+"create-tauri-app": patch
+---
+
+Work around bugs between esbuild and npm by installing directly at the end of the sequence. Also default to using the latest on all of the installs instead of npx's cache.

.github/workflows/test-cta.yml

@@ -9,6 +9,8 @@ on:
     inputs:
       branch:
         default: "dev"
+      platform:
+        default: "ubuntu"
   pull_request:
     paths:
       - "tooling/create-tauri-app/**"
@@ -19,7 +21,7 @@ env:
 jobs:
   create-recipe-with-npm:
     name: "node@${{ matrix.node }} + npm@${{ matrix.manager }}: ${{ matrix.recipe }}"
-    runs-on: ubuntu-latest
+    runs-on: ${{ github.event.inputs.branch || 'ubuntu' }}-latest
 
     strategy:
       fail-fast: false
@@ -45,9 +47,18 @@ jobs:
           npm-version: ${{ matrix.manager }}
           yarn-version: 1.22.5
       - name: install webkit2gtk
+        if: (github.event.inputs.branch || 'ubuntu') == 'ubuntu'
         run: |
           sudo apt-get update
           sudo apt-get install -y libgtk-3-dev libgtksourceview-3.0-dev webkit2gtk-4.0 libappindicator3-dev
+      - run: yarn
+        working-directory: tooling/cli.js
+      - run: yarn build
+        working-directory: tooling/cli.js
+      - run: yarn
+        working-directory: tooling/api
+      - run: yarn build
+        working-directory: tooling/api
       - run: yarn
         working-directory: tooling/create-tauri-app
       - run: yarn build
@@ -60,7 +71,7 @@ jobs:
 
   create-recipe-with-yarn:
     name: "node@${{ matrix.node }} + yarn@1: ${{ matrix.recipe }}"
-    runs-on: ubuntu-latest
+    runs-on: ${{ github.event.inputs.branch || 'ubuntu' }}-latest
 
     strategy:
       fail-fast: false
@@ -81,6 +92,7 @@ jobs:
           node-version: ${{ matrix.node }}
           yarn-version: 1.22.5
       - name: install webkit2gtk
+        if: (github.event.inputs.branch || 'ubuntu') == 'ubuntu'
         run: |
           sudo apt-get update
           sudo apt-get install -y libgtk-3-dev libgtksourceview-3.0-dev webkit2gtk-4.0 libappindicator3-dev

tooling/create-tauri-app/src/index.ts

@@ -6,7 +6,7 @@ import minimist from 'minimist'
 import inquirer from 'inquirer'
 import { bold, cyan, green, reset, yellow } from 'chalk'
 import { platform } from 'os'
-import { resolve, join } from 'path'
+import { resolve, join, relative } from 'path'
 import { cra } from './recipes/react'
 import { vuecli } from './recipes/vue-cli'
 import { vanillajs } from './recipes/vanilla'
@@ -323,26 +323,19 @@ const runInit = async (argv: Argv): Promise<void> => {
     }
   }, [])
 
+  const tauriCLIVersion = !argv.dev
+    ? 'latest'
+    : `file:${relative(appDirectory, join(__dirname, '../../cli.js'))}`
+
   // Vue CLI plugin automatically runs these
   if (recipe.shortName !== 'vuecli') {
     logStep('Installing any additional needed dependencies')
-    if (argv.dev) {
-      await shell(packageManager, ['link', '@tauri-apps/cli'], {
-        cwd: appDirectory
-      })
-      await shell(packageManager, ['link', '@tauri-apps/api'], {
-        cwd: appDirectory
-      })
-    }
-
     await install({
       appDir: appDirectory,
       dependencies: recipe.extraNpmDependencies,
-      devDependencies: argv.dev
-        ? [...recipe.extraNpmDevDependencies]
-        : [argv.dev ? '@tauri-apps/cli' : ''].concat(
-            recipe.extraNpmDevDependencies
-          ),
+      devDependencies: [`@tauri-apps/cli@${tauriCLIVersion}`].concat(
+        recipe.extraNpmDevDependencies
+      ),
       packageManager
     })
 

tooling/create-tauri-app/src/recipes/react.ts

@@ -84,7 +84,7 @@ export const cra: Recipe = {
       await shell(
         'npx',
         [
-          'create-react-app',
+          'create-react-app@latest',
           ...(template === 'cra.ts' ? ['--template', 'typescript'] : []),
           `${cfg.appName}`,
           '--use-npm'

tooling/create-tauri-app/src/recipes/vite.ts

@@ -88,23 +88,34 @@ const vite: Recipe = {
           cwd
         }
       )
-      await shell('yarn', ['install'], { cwd })
     } else {
       await shell(
         'npx',
-        ['@vitejs/create-app', `${cfg.appName}`, '--template', `${template}`],
+        [
+          '@vitejs/create-app@latest',
+          `${cfg.appName}`,
+          '--template',
+          `${template}`
+        ],
         {
           cwd
         }
       )
-      await shell('npm', ['install'], { cwd })
     }
 
     await afterViteCA(cwd, cfg.appName, template)
   },
-  postInit: async ({ packageManager }) => {
+  postInit: async ({ cwd, packageManager }) => {
+    // we don't have a consistent way to rebuild and
+    // esbuild has hit all the bugs and struggles to install on the postinstall
+    await shell('node', ['./node_modules/esbuild/install.js'], { cwd })
+    if (packageManager === 'yarn') {
+      await shell('yarn', ['build'], { cwd })
+    } else {
+      await shell('npm', ['run', 'build'], { cwd })
+    }
     console.log(`
-    Your installation completed.
+    Your installation completed. Change directories to \`${cwd}\`.
     To start, run ${packageManager === 'yarn' ? 'yarn' : 'npm run'} tauri ${
       packageManager === 'npm' ? '--' : ''
     } dev

tooling/create-tauri-app/src/recipes/vue-cli.ts

@@ -25,7 +25,7 @@ const vuecli: Recipe = {
     await shell(
       'npx',
       [
-        '@vue/cli',
+        '@vue/cli@latest',
         'create',
         `${cfg.appName}`,
         '--packageManager',

tooling/create-tauri-app/test/index.spec.ts

@@ -20,45 +20,10 @@ const timeoutLong = 900000
 const timeoutLittleLonger = 930000
 const logOut = false ? 'inherit' : 'pipe'
 
-beforeAll(async () => {
-  const installCLI = await execa('yarn', [], {
-    stdio: logOut,
-    cwd: clijs,
-    timeout: timeoutLong
-  })
-
-  const buildCLI = await execa('yarn', ['build-release'], {
-    stdio: logOut,
-    cwd: clijs,
-    timeout: timeoutLong
-  })
-
-  const linkCLI = await execa('yarn', ['link'], {
-    stdio: logOut,
-    cwd: clijs,
-    timeout: timeoutLong
-  })
-
-  const installAPI = await execa('yarn', [], {
-    stdio: logOut,
-    cwd: api,
-    timeout: timeoutLong
-  })
-
-  const buildAPI = await execa('yarn', ['build'], {
-    stdio: logOut,
-    cwd: api,
-    timeout: timeoutLong
-  })
-
-  const linkAPI = await execa('yarn', ['link'], {
-    stdio: logOut,
-    cwd: path.join(api, 'dist'),
-    timeout: timeoutLong
-  })
-}, timeoutLittleLonger)
-
 describe('CTA', () => {
+  console.warn(
+    'NOTE: You need to have installed and built cli.js and api before running the tests.'
+  )
   describe.each(recipes.map((recipe) => [recipe, 'tauri-app']))(
     `%s recipe`,
     (recipe: string, appName: string) => {