TWE Design System: Docker live reload setup

[joshfishman]

Overview

We need to create a docker image and process for team members so it is easier join the project and start coding

Action Items

• Create a feature branch in git
• Setup a docker image with all dependencies
• ensure .gitignore is setup properly
• Ensure that the docker container live reloads sass and markdown changes to the local server
• Add setup instructions to the Software Engineer wiki
• Commit the docker image to the repo and create a PR

Resources/Instructions

How to create a docker image

[Brayheart]

Currently working on: Docker image needs to hot reload for local edit to populate.

Make sure MKdocs is running

[Brayheart]

Updated the setup instructions

Just run docker run -p 8000:8000 -v $(pwd):/app {your-project-name}

[Brayheart]

Updated contributing document

to include docker run -p 8000:8000 -v $(pwd):/app internship-website-design-system so people have the command to be able to edit the design system locally

[ExperimentsInHonesty]

• Move the content from https://github.com/hackforla/internship/wiki/Setup-the-Microsite-Locally-with-Docker to the contributing file https://github.com/hackforla/internship-website-design-system/blob/main/CONTRIBUTING.md under its own heading or subheading
• delete this from https://github.com/hackforla/internship/wiki/Setup-the-Microsite-Locally-with-Docker

• How to Setup locally

• replace the url in this link with the new link created by the new header in the contributing file

• • How to set up locally (See Contributing, How to set up locally )

[Brayheart]

@ExperimentsInHonesty I've removed the setup the microsite locally with docker page, that information has been put into the contributing file under the installation instructions.

[ExperimentsInHonesty]

@Brayheart

There are still some edits that are not working properly

Please fix.

on this page https://github.com/hackforla/internship/wiki/Software-Engineer
the link

How to set up locally (See Contributing, How to set up locally )

Should go to

https://github.com/hackforla/internship-website-design-system/blob/main/CONTRIBUTING.md#setting-up-the-development-environment

And you should delete this
How to Setup locally

[joshfishman]

these links need to be setup above

[aconstas]

✅ fixed hyperlinks to correct pages
✅ deleted "How to Setup locally"
✅ removed references of linking Figma to GitHub since we are no longer doing that

[joshfishman]

docker not properly reloading

[joshfishman]

Check out the official HFLA MKDocs docker

[joshfishman]

This is solved with my last commit to the design system repo

Updating docs with new docker account docker run -p 8000:8000 -v $(pwd):/docs ds

[joshfishman]

Our Docker is running to build and display the site.
What we need to proceed with development is to setup the docker so that it complies Sass and has live reload on file change. This was working for me locally but when I pull down a fresh copy of repo it does not work.

[joshfishman]

This is working on my machine but will not work on my other devs machine. Their installs do not livereload or compile. I have mac os x one dev has mac one windows. When they start the site they cant reach it at 0.0.0.0, only localhost. I can see it at both addresses

[fyliu]

I couldn't reproduce the problem on my windows machine.

The scss recompile and livereload both work correctly for me.

The commands I used from Josh are:

docker build -t ds .
docker run --rm -p 8000:8000 -v $(pwd):/docs ds

I added the --rm so it auto-removes the container after running it, but that doesn't affect the problem.

My steps to reproduce successful recompile and live reload:

1. Open the browser to http://localhost:8000/internship-website-design-system/buttons/
2. Open \docs\components\sass\components\_buttons.scss in an editor
3. Change .btn-sm.font-size to 2rem;
4. Save the file
5. See the /docs/dist/main.css recompiled to a corresponding change
6. See the Button text size updated to something large when it auto-reloads

Edited to be more to the point.

[ExperimentsInHonesty]

@joshfishman the devops community says why not just use localhost? What is the functional difference for your developers?

[ExperimentsInHonesty]

This has been solved. It was a cache issue for existing devs.