Skip to content
This repository has been archived by the owner on Nov 9, 2023. It is now read-only.

Add document explaing how to make changes and view them locally #158

Merged
merged 2 commits into from
Sep 6, 2018

Conversation

erikphansen
Copy link
Contributor

@erikphansen erikphansen commented Sep 5, 2018

This is a major rework of the instructions on making changes to the module and previewing them locally. I hope I made things cleared and more complete. I did remove what I thought were some unnecessary details in the old instructions. I also added info on tearing down the test set up and restoring things. The original instructions totally lacked those.

I'd encourage you to go through these instructions yourself and make sure that they are clear, accurate, and complete. If you do, I'd suggest that you simply change the main background color as a simple test to make sure you can preview the change in vets-website.

A few thoughts/questions:

  • Why is this repo named design-system but the published module is formation? Not a big deal, but it can potentially lead to a little confusion.
  • It looks like we could adjust the test-publish NPM script to first run export-components. It's hard to imagine a scenario where you'd want to publish locally without first building the module. Or maybe I should just make a new script that does both; it's silly to have to run two design-system scripts each time you want to see your changes.

Copy link
Contributor

@cehsu cehsu left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me. This is really helpful.

2. If you are using `vets-website` as your consuming app and it is already running, it should notice the changes and rebuild. If not, restart the app locally.
3. After rebuilding completes, your changes will now be visible locally at `localhost:3001`.

## Tearing down the local testing setup
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a great addition, good idea.


In the consuming app:
1. run `yalc remove @department-of-veterans-affairs/formation` to remove the link from the consuming app's `node_modules` dir to the local version of `formation`.
2. **NOTE:** There seems to be an issue with Yalc not cleaning up after itself properly, so you'll have to also run `unlink node_modules/@department-of-veterans-affairs/formation`
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it possible to provide a link to any bug reports here?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sadly I didn't see an open issue for this (which means I should file one myself!). I also tested yalc add instead of yalc link to see if the cleanup went more smoothly. Sadly it did not.

I'll file a bug a add a link to it here.

@erikphansen
Copy link
Contributor Author

I just spent a chunk of time seeing it plain old yarn link would work better than yalc. It works, but because of how design-system builds its module, it's a lot easier to stick with yalc and deal with the fact that it doesn't clean up after itself very well. It's a minor annoyance that's easy to deal with as long as it's well documented.

Copy link

@emilywaggoner emilywaggoner left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These edits look good to me, @erikphansen - thanks!

@erikphansen erikphansen merged commit 0323ecc into master Sep 6, 2018
@erikphansen erikphansen deleted the new-docs branch September 6, 2018 15:36
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants