question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Improve UX experience when packages are not installed via projen

See original GitHub issue

Documentation for lots of NPM packages often include instructions for how to install the package, say by running npm i -D my-fancy-package. Installing stuff this way is the norm for most people. But if you’re new to projen (e.g. you’re contributing to an existing repo and maybe didn’t realize it had projen or what projen did), you might run the command without realizing that doing that will not register the dependency with projen.

To improve the UX, I think it could be useful if projen automatically detects when a dependency got added to package.json when it wasn’t expected. Maybe it could give a warning, suggesting that you should add the package(s) to .projenrc.js instead.

(For a lot of other config files, I believe this issue doesn’t apply because they are set as readonly, so it’s clear when you shouldn’t edit a file - but package.json must be editable for technical reasons IIRC).

In terms of implementation, I think this could be calculated during the synthesis process, when you run npx projen, by running a check against the internal .projen/deps.json file.

I haven’t given a ton of thought on whether this could have implications / cause conflicts in other user development flows, but I figured I’d drop the idea here anyways. Any kind of warning could get very annoying if it has false positives / shows up unnecessarily.


Also independently of this, could it be useful to have a page in the docs for projen newbies that lists out common development tasks and how you might do them differently if you’re working on a projen-based javascript project vs a traditional javascript project? ex.

Operation In a traditional project… In a projen project…
Installing dependencies In the command line, run npm install package-name or npm install --save-dev package-name. In .projenrc.js, add project.addDeps('package-name') or project.addDevDeps('package-name')
Exclude a file from git tracking Edit .gitignore to add file, directory, or other pattern. In projenrc.js, add project.gitignore.exclude('file-to-ignore')
…etc. …etc. …etc.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:2
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

2reactions
brianfoodycommented, Apr 9, 2021

A more intuitive experience for me would be to add an npx projen install command so that I can stay in my happy land of installing through command line. Manually adding of deps is the only thing I don’t really like so far.

0reactions
github-actions[bot]commented, Jul 8, 2021

Closing this issue as it hasn’t seen activity for a while. Please add a comment @mentioning a maintainer to reopen.

Read more comments on GitHub >

github_iconTop Results From Across the Web

10 Tips to Improve UX/UI Design of Web App - TechMagic
In this article, we share insights on the top 10 tips for great UX/UI in modern web applications. Learn more on how to...
Read more >
Manual releases are broken in new tag-based bumps #726
I'm talking about an existing project where we have been using the previous release task. So there are existing tags. Here is my...
Read more >
Design Consistency Guide UI and UX Best Practices - UXPin
Discover best practices for UX and UI design consistency with UXPin. Navigate this important topic following our 9 best practices.
Read more >
10 Tips to Improve Your Website's User Experience - Adoric
Learn how to improve your website's user experience. There are many benefits to it: better user engagement, higher ranking on Google, etc.
Read more >
The Difference Between UX and UI Design – A Beginner's Guide
UX design is NOT about visuals; it focuses on the overall feel of the experience. What is user interface (UI) design? Despite it...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found