Exporting Code
Various options to export code as per your needs.
Quest generates code that you can extend as you see fit for your application. You have several options to export code based on your application and workflow requirements.
- Framework Type: ReactJS or NextJS
- Language Type: Javascript or Typescript
- Single Component, Select files in your app, or the Entire App
- Download to local or Push to your repository
Quest Export is based on your app settings. When you create an app in Quest, it has default settings but you can adjust them to your project requirements. Select framework, language, custom fonts and images paths. Exported code honors these settings: images and fonts are added to relevant folders, all imports in modules are absolute and respect set paths, app structure is set based on selected framework. To adjust remote repo settings, refer to Push to your Repository - Quest Docs.
Screenshot of Export Setting for your App
Each component has routing settings in the editor right side panel. You may set the component as a page and add a route, title and description for it. These settings are honored when a full app is generated. Quest will generate a page for each route in Next.js or add routes to the router in React app. We use React Router v6 for single page application routing in React app. Each page/route metadata will be added in the component in Next.js or in the component from the “react-helmet” package in React app.
All imports in Quest generated modules are absolute. For any export, whether it’s individual component or full app, you will receive jsconfig.json or tsconfig.json files based on file type in app settings. This file must be stored on the root level of your project and it enables absolute imports in the project.
You may download your code/push to your remote repository from app settings or from the editor.
In the Quest Component editor, you may choose to download only component files, download an App Package with a generated fully deployable React/Next.js app with the current component as a root, or push the component to your remote repository based on the app settings.
Download/push to remote repo only files for a component. Generated files are:
- ui file
- hook file if conditions for generation are met
- folder with assets if images are used in component UI
- types.ts file for TypeScript project
- tsconfig.json/jsconfig.json file based on selected language.
Download the “App Package” - A full React or Next.js app package ready to be deployed or run on localhost is generated. All routing settings are disregarded and the current component is set as a home route. Components folder includes the current component and its child components. In your terminal, navigate to the downloaded folder, run “npm i” to install all packages the project depends on, then run “npm start” for React or “npm run dev” for Next.js to see your project running on localhost.
In App Settings, you may choose to download code or push to a remote repository. You may choose to do so only for the selected files of the project or the full app with routing settings of each component. Additionally you may set the root level component directly in the app settings. If you have a few components with the same route we may not know which one will be added to your router. Inspect routes carefully before exporting for predictable behavior of your app.
If you export a TypeScript project, the types.ts file will include an interface for each component props. When pushing to a remote repository, we detect if extra prop has been added and append it to the relevant interface. We never override or cleanup your types.ts file or hook file, but only append new values in the remote repo.
Download/push to remote repo select files - select only files you want to generate. Additionally types.ts file for TypeScript project and tsconfig.json/jsconfig.json file will be exported. The structure of files and imports in modules will be set based on the selected framework but framework files will not be exported.
Download/push to remote repo full app - a full CRA or Next.js app ready to be deployed or run on localhost will be exported. In your terminal, navigate to the downloaded folder, run “npm i” to install all packages the project depends on, then run “npm start” for React or “npm run dev” for Next.js to see your project running on localhost.
Quest uses Prettier to format code to adhere to the Airbnb style guide.