NOTE: the CSS color function here is deprecated. New functions are in the works. When a spec is available we’ll get this site updated. See this Github issue for background.
Visualize The CSS Color Function.
ColorMe.io is built using Create React App. See that project for detailed documentation.
npm install
Start site in development mode
npm start
Open http://localhost:3000 to view it in a browser.
If you find a bug or have an idea, feel free to open a pull request. Tests for new code are encouraged. Existing tests must pass before pull requests will be accepted
npm test
Tests will also run in Travis.
npm run build
Will run a modified version of CRA build process. First it builds the project for production like normal. Once that completes it runs npm run generate-sw which executes scripts/generate-sw.js. That script locates the static assets in build/asset-manifest.js and writes them to the STATIC_URLS in build/service-worker.js. This allows us to cache the static assets with fingerprinted filenames.
This section is for you, Tyler. When you go away from this project for a while and come back you will no doubt forget how to deploy to prod.
This site is hosted in AWS S3. It uses Route53 for DNS and a Cloudfront distribution. The SSL cert is managed using AWS Certificate Manager.
To push code to prod, run:
npm run release
That will create a new git tag. Travis will see the new tag and run ./scripts/deploy.sh which in turn builds the project with npm run build and uploads the artifacts to S3 using the aws cli tool.
Note: The AWS key and secret in .travis.yml are for an IAM role that only has access to the the s3://colorme.io bucket.