function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
David Man PhanDavid Man Phan 

I finally got @salesforce/lwc-dev-server installed successfully after months of trying

Before I forget these were the exact steps I took to finally make it work.

CLEAN UP
  • Clean up your current installations:
  • Delete Folders .sf  and .sfdx and local installation
  • Uninstall all your previous versions of node and python
FRESH INSTALL (NODE, PYTHON, NODE-GYP)
  1. Make sure you have Python 3 installed
    1. During NPM Install of Plugin, it will look for a version of Python installed, else it will fail
  2. Install NodeJS LTS 18
    1. Install Node-Gyp using NPM Install command (NPM comes with NodeJS)
    2. Otherwise, the NPM installation of the Plugin will automatically install NODE-GYP for you
Install SF CLI
  • Install SF CLI using NPM!!!!!!  not the stupid Windows MSI Installer
    • https://developer.salesforce.com/docs/atlas.en-us.sfdx_setup.meta/sfdx_setup/sfdx_setup_install_cli.htm#sfdx_setup_install_cli_npm
    • NPM is a two step process
      • Install .sfdx
      • Install .sf
TEST SF CLI
  • After you have installed .sf and .sfdx  (This will get you the latest version)
  • AUTHENTICATE an ORG
  • Test it by connecting to your Sandbox
    • If you can't authenticate using standard web login try this
      • sfdx force:auth:device:login --instanceurl <your custom or test.salesforce.com> --setdefaultusername
      • This will display a user code within the cmd window
      • Enter that Code after  you open 
      • YOU MUST Enter the URL that you started with
      • https://<The URL You specified above>/setup/connect in a browser
Now here is the FUN
Several repeat steps were needed

Step1: sfdx plugins:install @salesforce/lwc-dev-server 
  • This will fail with that stupid YARN Error Message
Step2: npm install -g @salesforce/lwc-dev-server
  • This will properly install Node-Gyp for you
  • It will also pass the python check sinced you installed it at the very beginning
  • gyp info it worked if it ends with ok
    gyp info using node-gyp@9.3.1
    gyp info using node@18.16.0 | win32 | x64
    gyp info find Python using Python version 3.11.3 found at "C:\Python311\python.exe"
  • But it will Burp about not having Visual Studio
    • 7756 error gyp ERR! find VS could not use PowerShell to find Visual Studio 2017 or newer, try re-running with '--loglevel silly' for more details
      7756 error gyp ERR! find VS looking for Visual Studio 2015
      7756 error gyp ERR! find VS - not found
      7756 error gyp ERR! find VS not looking for VS2013 as it is only supported up to Node.js 8
      7756 error gyp ERR! find VS 
      7756 error gyp ERR! find VS **************************************************************
      7756 error gyp ERR! find VS You need to install the latest version of Visual Studio
      7756 error gyp ERR! find VS including the "Desktop development with C++" workload.
    • NO PROBLEM 
    • RUN npm install --global windows-build-tools
      •  This will also FAIL, but it downsloads the VS17 exe file for you
      • This is saved in
      • C:\Users\your name\.windows-build-tools\vs_BuildTools.exe
      • Install it and MAKE SURE YOU Select
      • VS including the "Desktop development with C++" workload.
Step3: RUN IT AGAIN npm install -g @salesforce/lwc-dev-server
  • This time it will detect Python and the Version of Visual Studio 17
  • It will load all the packages with no errors, but the plug in is still not installed
  • you will see something like this
  • added 1218 packages, and changed 1 package in 7m
    102 packages are looking for funding
  • I ALMOST QUIT AT THIS POINT
Step4: RUN IT AGAIN the SFDX command PLUGIN again
  • sfdx plugins:install @salesforce/lwc-dev-server 
  • GOSH DARN IT - IT FINALLY Installed
    • @salesforce/lwc-dev-server... \ [2/4] Fetching packages...
      warning "@salesforce/lwc-dev-server > @rollup/plugin-alias@3.1.9" has unmet peer dependency "rollup@^1.20.0||^2.0.0".
      warning "@salesforce/lwc-dev-server > request-promise-native@1.0.9" has unmet peer dependency "request@^2.34".
      warning "@salesforce/lwc-dev-server > request-promise-native > request-promise-core@1.1.4" has unmet peer dependency "reqInstalling plugin @salesforce/lwc-dev-server... installed v2.11.0

In Summary
Python 3
Nodejs 18 LTS
Visual Studio 17 and Desktop Build
Multiple Plug-in Install steps
(See my step by step above)

 

Anyways, I HOPE THIS IS Useful, because I scoured the internet for answers.  TRUST ME.  All the answers had some truth, but none worked for me.  UNTIL THIS DAY!!!!!

David Man PhanDavid Man Phan

for the authentication

https://<your domain url>/setup/connect   <-- is the full URL
David Man PhanDavid Man Phan
Now that I have the @salesforce/lwc-dev-server plug-in installed
I anctipated more road blocks and it was true

I am now having problems trying to view the components in preview mode.  Even with a simple Hello component

Supposedly these are the steps you must take for it to work
Plugin Installed
Create a LWC Component in VS and it will create a project with proper SFDX json and folder structure
Authenticate an Org
This is your default ORG now
YOU DON'T NEED a DEV HUB OR A SCRATCH ORG.  I recommend using a DEV sandbox if you work in a company otherwise request a developer sandbox from Trailheads.

This is your default ORG

Optimal Experiance
  • With VS open
  • Run this in your terminal
    • sfdx force:lightning:lwc:start
      • This just initiates the server in the background
    • open localhost:3333 in your browser
      • It's suppose to show all your comp0nents in your default ORG in a pretty page.  NOT!!
Alternative Attempt
  • With VS Open
    • Click on any LWC Folder/File and select Preview Component from the Shift/Ctrl/P prompt
    • This will open up the Local Server in the Browser 
    • The URL will show something like http://localhost:3333/preview/c/hello
      • Where /c/hello is the LWC component you initially asked to preview
    • The Page Never Loads your component.  NEVER!
      • I'm currently troubleshooting why by inspecting the page and going through debug mode to see where exactly why the components are not viewing.
        • I already spent 4 hours on a saturday
      • Will reconvene Sunday
  • Here is how the page source looks like in the LocalHost
    • The issue is with the webruntime-amd-shim.js script portion
    • This is what I am debuggin
    • This controls the write of the HTML to display the component
<!DOCTYPE html>
<html lang="en" style="background: white;">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="sessionNonce" content="c3871b80-8d18-4d3b-9152-e484b8293154" />
        <link rel="icon" href="/assets/localdev/favicon.ico" />
        <title>Local Development Server</title>

        
<script type="text/javascript" src="/webruntime/framework/c149fba8/dev/webruntime-amd-shim.js"></script>
<script type="text/javascript" nonce="940c4ce5-1a1b-49f9-8330-1412d0dcb11d">Webruntime.define('@app/basePath', [], function() {
                    return "";
                 })
Webruntime.define('@app/csrfToken', [], function() {
                    return undefined;
                 })</script>
<script type="text/javascript" nonce="940c4ce5-1a1b-49f9-8330-1412d0dcb11d">
        (function() {
            const globalValues = {"$Browser.S1Features.isLds224Enabled":true};
            if (window.$A === undefined || window.$A === null) {
                window.$A = {};
            }
            window.$A.get = function(key) {
                return globalValues[key];
            };
        })();</script>
<script type="webruntime-importmap">{"imports":{"c/":"/webruntime/custom-component/latest/dev/en-US/c/","assert":"/webruntime/component/latest/dev/en-US/assert","lwc":"/webruntime/component/latest/dev/en-US/lwc","wire-service":"/webruntime/component/latest/dev/en-US/wire-service","@salesforce/label":"/webruntime/label/dev/en-US/:name","@webruntime/app":"/webruntime/bootstrap/latest/dev/en-US/@webruntime/app","lightning/":"/webruntime/component/latest/dev/en-US/lightning/","@salesforce/":"/webruntime/component/latest/dev/en-US/@salesforce/","force/":"/webruntime/component/latest/dev/en-US/force/","forcehelp/linkToNonSalesforceResource":"/webruntime/component/latest/dev/en-US/forcehelp/linkToNonSalesforceResource","forceChatterApi/util":"/webruntime/component/latest/dev/en-US/forceChatterApi/util","webruntime_navigation/":"/webruntime/component/latest/dev/en-US/webruntime_navigation/","webruntime/":"/webruntime/component/latest/dev/en-US/webruntime/","localdevserver/":"/webruntime/component/latest/dev/en-US/localdevserver/"}}</script>
<script type="text/javascript" src="/webruntime/bootstrap/latest/dev/en-US/@webruntime/app"></script>
<script type="webruntime-module" src="import:@webruntime/app"></script>
        <script src="/localdev/c3871b80-8d18-4d3b-9152-e484b8293154/localdev.js"></script>
        <script src="/reload/reload.js"></script>

        <link
            rel="stylesheet"
            href="/assets/localdev/styles/salesforce-lightning-design-system.min.css?2.11.0"
        />

        <link
            rel="stylesheet"
            href="/assets/localdev/styles/styles.css?2.11.0"
        />
    </head>

    <body id="main">
        <localdevserver-app></localdevserver-app>
    </body>
</html>


 
Daway PhantasticDaway Phantastic

my answer in the question.  guess nobody cares for the beta @salesforce/lwc-dev-server 

it is a big headache and I still can't get my components to preview in the local server.
Ch SalmanCh Salman
Above ground pools are typically made from one of three materials: steel, aluminum, or resin. Each material has its own advantages and disadvantages, so it's important to research and compare each option before making a decision. Steel is a durable option, but can be prone to rusting if not properly maintained. Aluminum is rust-resistant and lightweight, but can also be more expensive. Resin is a newer material that is corrosion-resistant and durable, but can be more difficult to repair if damaged. above ground pool with deck (https://skyhighpools.com/best-above-ground-pool-lights/)
Daway PhantasticDaway Phantastic

"WHOLLY MOLLY"

LWC Local Development Server is finally working!!!!

This time I tried setting it up on my Work PC

Followed pretty much the same steps but this timie I did something a little different

I installed NodeJS as a stand-alone, but when I installed VS 17 I also selected the NodeJS package as part of the installation

Not sure if that was the trick, but it works.

My Quest is done.  I can actually start learning LWC development full-time.

 
Suresh Sahu 9Suresh Sahu 9
Hi there I want use service for my website for blog news
game error fix(game news and error) (game error (https://itmtrav.com/))) how ?
Ethun HuntEthun Hunt
Thank You so much for your solution! Keep visitng my website on Anti-Ban WhatsApp Mods (https://apksforwamods.com/).
Anand Pujeri 10Anand Pujeri 10
Thanks David, this was helpful.