This documentation is not updated anymore. All documentation of Respresso moved to https://respresso.io/docs.
| Content | Link |
|---|---|
| Add Respresso to new or exiting Web project | https://respresso.io/docs/guides/web-project-setup |
| Get started with Respresso CLI (auto-sync) | https://respresso.io/docs/get-started-with-respresso-sync |
| Migrate from legacy NPM package to the new CL I | https://respresso.io/docs/guides/migrate-from-legacy-npm-package |
| Content | Link |
|---|---|
| Respresso CLI reference (auto-sync) | https://respresso.io/docs/respresso-cli-reference |
| Respresso CLI config reference (auto-sync) | https://respresso.io/docs/respresso-cli-config-reference |
| Import existing resources from Web project | Localization, Image (raster or vector), Color |
| Localization format - JSON (Flat or Structured) | https://respresso.io/docs/localization/docs/localization/json-format |
| Localization variables in Respresso | https://respresso.io/docs/localization/variables |
| Localization variable placeholders | https://respresso.io/docs/localization/custom-variable-placeholders |
Seriously, 🛑 stop 🛑 here and go to the new docs!
Respresso is a centralized resource manager for shared Android, iOS and Web frontend projects. It allows you to simply import the latest assets into your workspace. You may store several versions of the same resource in the cloud and pick the ones you need to import. Respresso currently supports five types of resources:
- Images
- Localization
- Fonts
- Colors
- Raw
Using Respresso should be intuitive to anyone who has used npm before. Configurations are stored in the respresso.json, while your current assets’ metadata are stored in respresso.lock.
In respresso.json you can customize:
- projectToken: received during initialization of your project in the Respresso web interface
- targetDirectory: it should be under src as CRA does not import from elsewhere
- resources: only import what you need and you can change the version number, too
The currently accepted resource names are:
- image
- color
- localization
- font
- raw
Accepted version formats are:
- [major].[minor].[patch] eg. 1.2.0
- [major].[minor].[patch]+ eg. 1.2.0+ (not available in strict mode)
- [major].[minor]+ eg. 1.2+ (not available in strict mode)
To start using Respresso in your app takes almost zero time and effort.
- Add to your dev devendencies:
npm install respresso --dev
- Add a sync script into your package.json:
"scripts": {
"sync": "respresso sync",
...
}
- After configuring your Respresso project, just issue
npm run syncand you can start using the resources.
- Install any packages that it depends on
npm install - Sync resource files
npm run sync - Start running the server
npm start
This demo uses @ngx-translate, so you can find all relevant info there. Respresso files are imported in src/app/app.module.ts.
You need to import the color definitions in every scss files :( You can find a sample in src/app/app.component.scss.
Find a sample use of svg in src/app/app.component.html.
Find a sample use of fonts in src/styles.scss.
Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.
Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.
Run ng test to execute the unit tests via Karma.
Run ng e2e to execute the end-to-end tests via Protractor.
To get more help on the Angular CLI use ng help or go check out the Angular CLI README.