A project using TensorFlow JS to create the spell check
of design systems, that helps designers by keep-watching numerous design elements instead of humans. The best way to illustrate this is to see it in action via the animation below:
Item | Description |
---|---|
Zeplin Dev App | A Zeplin Dev app forms the connection between your app and Zeplin API. Create an App on the Zeplin Developers tab. |
Heroku account (optional) | Heroku is a cloud service that lets you deploy and serve web apps. You don't need a Heroku account if you're deploying the app on another platform. |
Follow the below instructions to deploy your customized app using Heroku and Node.js.
-
Make sure you have the following installed.
-
Clone this GitHub repository.
$ git clone https://github.com/dusskapark/zeplin-ml
-
cd
intozeplin-ml
directory. -
Install the dependencies by running:
$ yarn
-
Log in to Heroku from the command line.
$ heroku login
-
Create a named Heroku app.
$ heroku create {Heroku app name}
-
Take a note of your app's URL (
https://{Heroku app name}.herokuapp.com
). You'll need it when you add the app to Zeplin. -
Add a remote for Heroku to your local repository.
$ heroku git:remote -a {Heroku app name}
- Follow the instructions on the page Getting Started with Zeplin API.
- Take a note of your Zeplin App ID and Secret, because you'll need it for the next part.
- Locate the Developer tab and click the Manage details button.
- Enter your app's URL (
https://{Heroku app name}.herokuapp.com
) and - Click the Update button and publish the Zeplin app.
-
Set your Zeplin Client ID, Secret, RedirectUri using an environment variable.
$ heroku config:set REACT_APP_ZEPLIN_CLIENT_ID={YOUR ZEPLIN CLINET ID} $ heroku config:set REACT_APP_ZEPLIN_CLIENT_SECRET={YOUR ZEPLIN CLINET SECRET} $ heroku config:set REACT_APP_APP_URL={YOUR APP URL}
-
Copy your environment variable into the
.env
file for local testing.Heroku recommends setting up an
.env
file to use an environment variable in a local environment.$ heroku config:get REACT_APP_ZEPLIN_CLIENT_ID REACT_APP_ZEPLIN_CLIENT_SECRET REACT_APP_APP_URL -s >> .env
Note: Don't commit the
.env
file to GitHub. To exclude it, add the.env
file to your.gitignore
. -
Replace the
REACT_APP_APP_URL
on.env
withhttp://localhost:5000/
for testing locally -
Run the app locally to preview your changes:
$ heroku local
View the app by browsing to localhost:5000.
-
If you're happy with your changes, stage, commit, and deploy the app.
$ git add . $ git commit -m "My first commit" $ git push heroku master
-
Browse to your app's URL (
https://{Heroku app name}.herokuapp.com
) and confirm that your app is operational. -
Lastly, check whether your channel status is Published.
To get more information, you can check your app's logs using Heroku's GUI or Heroku CLI.
To get more information, check your app's logs online:
- In Heroku, go to Dashboard.
- Select the app you just created.
- In the top-right corner, click More.
- Click View logs.
You'll find the log under Application Logs.
-
Log in to Heroku from the command line (if you haven't already).
$ heroku login
-
Check the logs.
$ heroku logs --app {Heroku app name} --tail
If you have a question or a suggestion or found a bug, please tell us using the issue tracker of this project. Also We'd love to have your Pull Request for helping Zeplin-ML
!
Please note that this project was created with the help of the following projects.
This project is licensed under the terms of the MIT.