[Generator] Fix generator failing on Windows using WSL #385

adamraya · 2022-02-08T22:53:03Z

GUS: https://gus.lightning.force.com/lightning/r/ADM_Work__c/a07EE00000m7lbMYAQ/view

Description

The generator fails to create a project on Windows when running the App Generator npx pwa-kit-create-app using Windows Subsystem for Linux (WSL) from the Windows drive file system folder mounted in /mnt/c or /mnt/<LOGIC_UNIT>.

The root of the issue seems to be a lack of permissions on the WSL command line to manipulate the Windows drive temporal folder /tmp/.

The extractTemplate function in the App generator tries to move a folder inside the OS temporal directory /tmp/ to the final directory. The generator process fails due to a lack of permissions.

This PR replaces the shelljs.mv() method with the alternative shelljs.cp() method and its -R recursively option to copy the template files from the OS temporal director to the final output directory.

Limitations of using WSL to run processes from Windows drive file system folder mounted in `/mnt/c`

The project is now generated successfully, and the project start and works properly when running npm start.

However, we start to see other issues related to running processes using WSL from the Windows drive file system folder mounted in /mnt/c.
Like these Webpack watch errors that don't have a proper solution other than not running process from the Windows drive file system when using WSL.

adam@WinDev2104Eval:/mnt/c/Users/User/git/pwa-kit/preset-retail-react-app-demo$ npm start

> [email protected] start /mnt/c/Users/User/git/pwa-kit/preset-retail-react-app-demo
> cross-env NODE_ICU_DATA=node_modules/full-icu node ./scripts/start ssr

ssr-server: [nodemon] 2.0.14
ssr-server: [nodemon] to restart at any time, enter `rs`
ssr-server: [nodemon] watching path(s): build/build.marker
ssr-server: [nodemon] watching extensions: js,mjs,json
webpack: Watchpack Error (initial scan): Error: EACCES: permission denied, lstat '/mnt/c/DumpStack.log.tmp'
webpack: Watchpack Error (initial scan): Error: EACCES: permission denied, lstat '/mnt/c/pagefile.sys'
webpack: Watchpack Error (initial scan): Error: EACCES: permission denied, lstat '/mnt/c/swapfile.sys'
webpack: Watchpack Error (initial scan): Error: EACCES: permission denied, lstat '/mnt/c/DumpStack.log.tmp'
webpack: Watchpack Error (initial scan): Error: EACCES: permission denied, lstat '/mnt/c/pagefile.sys'
webpack: Watchpack Error (initial scan): Error: EACCES: permission denied, lstat '/mnt/c/swapfile.sys'
webpack: Watchpack Error (initial scan): Error: EACCES: permission denied, lstat '/mnt/c/DumpStack.log.tmp'
webpack: Watchpack Error (initial scan): Error: EACCES: permission denied, lstat '/mnt/c/pagefile.sys'
webpack: Watchpack Error (initial scan): Error: EACCES: permission denied, lstat '/mnt/c/swapfile.sys'
webpack: Watchpack Error (initial scan): Error: EACCES: permission denied, lstat '/mnt/c/DumpStack.log.tmp'
webpack: Watchpack Error (initial scan): Error: EACCES: permission denied, lstat '/mnt/c/pagefile.sys'
webpack: Watchpack Error (initial scan): Error: EACCES: permission denied, lstat '/mnt/c/swapfile.sys'
ssr-server: [nodemon] restarting due to changes...
ssr-server: [nodemon] starting `node /mnt/c/Users/User/git/pwa-kit/preset-retail-react-app-demo-1/build/ssr.js`
ssr-server: Proxying /mobify/proxy/api and /mobify/caching/api to https://kv7kzm78.api.commercecloud.salesforce.com
ssr-server: Proxying /mobify/proxy/ocapi and /mobify/caching/ocapi to https://zzte-053.sandbox.us02.dx.commercecloud.salesforce.com
ssr-server: Proxying /mobify/proxy/einstein and /mobify/caching/einstein to https://api.cquotient.com
ssr-server: HTTP development server listening on http://localhost:3000

Related Webpack thread: webpack/watchpack#187 (comment)

Types of Changes

Bug fix (non-breaking change that fixes an issue)
New feature (non-breaking change that adds functionality)
Documentation update
Breaking change (could cause existing functionality to not work as expected)
Other changes (non-breaking changes that does not fit any of the above)

Breaking changes include:

Removing a public function or component or prop

Adding a required argument to a function

Changing the data type of a function parameter or return value

Adding a new peer dependency to package.json

Changes

Use shelljs cp -R instead of mv

How to Test-Drive This PR

Enable and install WSL on Windows.
- Open a command line, choosing Run as administrator.
- Run the command to enable WSL:
  - Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux
- Restart Windows.
- Install a Linux distribution.
  - Launch the Microsoft store.
  - Search for a Linux distribution. e.g. Ubuntu 18.04 LTS
  - Click get.
  - Launch the Linux distribution.
  - Set username and password.
Access Windows file from the Ubuntu command line by changing the directory: cd /mnt/c
Run the generator and verify that now the project is generated successfully:

GENERATOR_PRESET=retail-react-app-demo node packages/pwa-kit-create-app/scripts/create-mobify-app.js --outputDir ./preset-retail-react-app-demo

Checklists

General

Changes are covered by test cases
CHANGELOG.md updated with a short description of changes (not required for documentation updates)

Accessibility Compliance

You must check off all items in one of the follow two lists:

There are no changes to UI

or...

Changes were tested with a Screen Reader (iOS VoiceOver or Android Talkback) and had no issues
Changes comply with WCAG 2.0 guidelines levels A and AA
Changes to common UI patterns and interactions comply with WAI-ARIA best practices

Localization

Changes include a UI text update in the Retail React App (which requires translation)

bendvc · 2022-02-15T00:58:37Z

packages/pwa-kit-create-app/scripts/create-mobify-app.js

@@ -388,7 +388,7 @@ const extractTemplate = (templateName, outputDir) => {
        cwd: p.join(tmp),
        sync: true
    })
-    sh.mv(p.join(tmp, templateName), outputDir)
+    sh.cp('-R', p.join(tmp, templateName), outputDir)


Just as a summary of our discussion. I'd like to see some numbers showing whether or not this will be a significant slow down to project generation. Now that the delete command on line 392 will be deleting more than just an empty temp folder, I suspect that this kind of action can be relatively slow on windows machines specifically.

If it is, maybe we discuss not deleting it at all?

@bendvc Time generating a project generator-shelljs-cp-to-extract-template vs release-1.4.x branch.

Steps to measure the time per branch:

Using Windows Command line checkout branch.

git clean -dxf && npm ci.

set GENERATOR_PRESET=retail-react-app-demo.

Run the create-mobify-app.js script.

Repeat the process 3 times.

Results:

generator-shelljs-cp-to-extract-template branch

C:\Users\User\git\pwa-kit>timecmd.bat node packages/pwa-kit-create-app/scripts/create-mobify-app.js --outputDir ./preset-retail-react-app-demo Installing dependencies for the generated project... To change your ecommerce back end you will need to update your storefront configuration. More information: https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/configuration-options Successfully generated a project in ./preset-retail-react-app-demo command took 0:0:59.11 (59.11s total)

C:\Users\User\git\pwa-kit>timecmd.bat node packages/pwa-kit-create-app/scripts/create-mobify-app.js --outputDir ./preset-retail-react-app-demo Installing dependencies for the generated project... To change your ecommerce back end you will need to update your storefront configuration. More information: https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/configuration-options Successfully generated a project in ./preset-retail-react-app-demo command took 0:0:52.47 (52.47s total)

C:\Users\User\git\pwa-kit>timecmd.bat node packages/pwa-kit-create-app/scripts/create-mobify-app.js --outputDir ./preset-retail-react-app-demo Installing dependencies for the generated project... To change your ecommerce back end you will need to update your storefront configuration. More information: https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/configuration-options Successfully generated a project in ./preset-retail-react-app-demo command took 0:0:53.28 (53.28s total)

release-1.4.x branch

C:\Users\User\git\v2-pwa-kit>timecmd.bat node packages/pwa-kit-create-app/scripts/create-mobify-app.js --outputDir ./preset-retail-react-app-demo Installing dependencies for the generated project (this can take a while) Successfully generated a project in ./preset-retail-react-app-demo command took 0:0:59.40 (59.40s total)

C:\Users\User\git\v2-pwa-kit>timecmd.bat node packages/pwa-kit-create-app/scripts/create-mobify-app.js --outputDir ./preset-retail-react-app-demo Installing dependencies for the generated project (this can take a while) Successfully generated a project in ./preset-retail-react-app-demo command took 0:0:54.47 (54.47s total)

C:\Users\User\git\v2-pwa-kit>timecmd.bat node packages/pwa-kit-create-app/scripts/create-mobify-app.js --outputDir ./preset-retail-react-app-demo Installing dependencies for the generated project (this can take a while) Successfully generated a project in ./preset-retail-react-app-demo command took 0:0:57.39 (57.39s total)

Use shelljs cp -R instead of mv

e158d25

adamraya requested a review from a team as a code owner February 8, 2022 22:53

adamraya added the ready for review PR is ready to be reviewed label Feb 8, 2022

bendvc reviewed Feb 15, 2022

View reviewed changes

Merge branch 'develop' into generator-shelljs-cp-to-extract-template

4834635

bendvc approved these changes Mar 3, 2022

View reviewed changes

bendvc and others added 2 commits March 3, 2022 11:55

Merge branch 'develop' into generator-shelljs-cp-to-extract-template

21f4ef7

Update CHANGELOG.md

8935d01

bendvc merged commit c8e4b05 into develop Mar 3, 2022

bendvc deleted the generator-shelljs-cp-to-extract-template branch March 3, 2022 21:09

adamraya mentioned this pull request Mar 31, 2022

[V2] Generator Port V1 Fix generator failing on Windows using WSL #480

Closed

12 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Generator] Fix generator failing on Windows using WSL #385

[Generator] Fix generator failing on Windows using WSL #385

adamraya commented Feb 8, 2022 •

edited

Loading

bendvc Feb 15, 2022

adamraya Feb 23, 2022 •

edited

Loading

[Generator] Fix generator failing on Windows using WSL #385

[Generator] Fix generator failing on Windows using WSL #385

Conversation

adamraya commented Feb 8, 2022 • edited Loading

Description

Limitations of using WSL to run processes from Windows drive file system folder mounted in /mnt/c

Types of Changes

Changes

How to Test-Drive This PR

Checklists

General

Accessibility Compliance

Localization

bendvc Feb 15, 2022

Choose a reason for hiding this comment

adamraya Feb 23, 2022 • edited Loading

Choose a reason for hiding this comment

Results:

generator-shelljs-cp-to-extract-template branch

release-1.4.x branch

adamraya commented Feb 8, 2022 •

edited

Loading

Limitations of using WSL to run processes from Windows drive file system folder mounted in `/mnt/c`

adamraya Feb 23, 2022 •

edited

Loading

`generator-shelljs-cp-to-extract-template` branch

`release-1.4.x` branch