Sp-dev-docs: Support for offline creation of SPFx solutions

[KoenZomers]

Category

• [X] Question
• [ ] Typo
• [ ] Bug
• [ ] Additional article idea

Expected or Desired Behavior

Would be nice if it was possible to create SPFx solutions in a truly offline scenario. Meaning no access to the NPM repository or the internet at any time in the development process.

Observed Behavior

Even when installing all NPM packages using an internet connection and then going offline, when creating a new SPFx solution, it requires having an internet connection to successfully complete.

[waldekmastykarz]

You could solve it today by having a local package registry with npm as uplink (for example Verdaccio). The first time you would install all packages, none of them would be available in your local registry so they would be downloaded from npm and stored in your local registry. The next time however, they would all be available locally already and you would be able to work locally.

[KoenZomers]

Thanks @waldekmastykarz for sharing. I've tried that option before, but couldn't get it to work. Even when setting NPM to use my custom repository, it would still try to go out to the internet when creating a new solution. Would you have more information on this? Perhaps I've missed something?

[andrewconnell]

Have you tried using Yarn instead of NPM? It keeps a local copy of the packages you need so you ~should~ be able to work offline. For instance, I do this when presenting at a conference / user group to avoid the "1-2m NPM penalty":

• before the presentation

  • create a new project (same type I'd use in the presentation... like a CSWP with ReactJS) with --skip-install
  • add all other package dependencies I'll need
  • run yarn which is the same as npm install

  
  

  this will download everything into yarn's cache on my machine...

  
  




• during the presentation... when potentially offline

  • create a new project with --skip-install
  • run yarn

  
  

  this will pull the packages from yarn's local cache

  
  

I use Yarn exclusively as my package manager over NPM and have for many months. it's much faster than NPM in my experience.

[waldekmastykarz]

@KoenZomers here is the information on configuring uplink for Verdaccio: http://www.verdaccio.org/verdaccio/docs/en/uplinks.html. Verdaccio is very easy to use comparing to other registries available on the internet.

[KoenZomers]

Thanks @andrewconnell and @waldekmastykarz . I'll look into your suggestions.

[KoenZomers]

@waldekmastykarz, the Verdaccio also doesn't seem to work in a 100% offline scenario. I can't run npm install verdaccio without an internet connection. Also can't find an offline alternative installer for it. Am I missing something?

[waldekmastykarz]

You install Verdaccio from the internet. Also, the first time you're installing npm packages, you have to have internet access. But once these packages are in your local Verdaccio registry, you can pull the plug.

[juanpicado]

Hi, here a verdaccio maintainer. @KoenZomers as @waldekmastykarz has mentioned, the first time you need to feed your local storage caching from the internet, then, when all packages are already in the storage verdaccio will lookup for updates, in the case to be offline, verdaccio will skip that step and will rely 100% on the local storage. The unique restriction exist using verdaccio offline is publishing a private package, but, such behavior can be disabled (http://www.verdaccio.org/verdaccio/docs/en/configuration.html#offline-publish) and verdaccio will be 100% offline.

[VesaJuvonen]

I think we have covered this topic quite nicely currently. Not sure on what else to add here, so closing this conversational issue.

[KoenZomers]

Certainly. Haven't gotten a chance to try it out yet, but enough information for now. Thanks all for your input!

[msft-github-bot]

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues