Skip to main content

Local Development

Running a parcel locally in host app

This example follows the creation of a new Abyss app. Documentation for creating a new app can be found here.

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 file you will need to refresh your website to see those changes live (Previously you had to manually rebuild the workshop build. Now it auto rebuilds the workshop build when a change is made).

Table of Contents