🛑 Docs out-of-date notice! 🛑
This documentation is not updated anymore. All documentation of Respresso moved to https://respresso.io/docs.
✔️ Up-to-date docs for Web is here:
Get started with Respresso
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 |
Learn more - Docs for Web Devs
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 |
new docs!
Seriously, 🛑 stop 🛑 here and go to theRespresso Web client
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
Usage
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.
Configuration
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)
Include resources into your web application
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 sync
and you can start using the resources.
Respresso React demo.
This project was bootstrapped with Create React App.
Try it
- Install any packages that it depends on
npm install
- Sync resource files
npm run sync
- Start running the server
npm start
Available Scripts
In the project directory, you can run:
npm run sync
Synchronizes data from Respresso server to src/respresso.
npm start
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
npm test
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
npm run build
Builds the app for production to the build
folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!