Skip to main content

Create Abyss App Deprecated

Starting an app with `create-abyss-app` is deprecated. Please refer to our Templates documentation for the recommended setup path.
View Templates

Local Development

Running a parcel locally in host app​

This example assumes a configured Abyss workspace. If you need a starting point, scaffold a new app using one of our Abyss Templates, then install Abyss using Getting Started.

1. Create your Parcel. Navigate to the parcels directory within your application and create a new or update an existing Parcel.

2. Host your Parcel. From the parcels directory in terminal, enter npm run preview.

3. Add the <script src="http://localhost:5000/abyss-parcel.js" /> tag to the <Head> element of document.tsx found at /products/web/src/document.tsx within your application.

4. Add the <abyss-parcel import="test-parcel@dev" /> tag to the AppBody.tsx file found at /products/web/src/common/AppBody, and place somewhere within the <RootContainer> element. This example dynamically imports the dev build of your Parcel. For more information, see the Dynamic Import section.

5. Start your application in another terminal by navigating to the application root directory and running npm run web. Your Parcel element should now display on the home page!

Note

When you make a change within a Parcel source code file, you will need to refresh your website to see those changes live. Previously, you had to manually rerun the workshop build; this is now done automatically, but there is no hot module reloading.

Table of Contents