Overview of portal development (original version)

You're viewing Apigee Edge documentation.
Go to the Apigee X documentation.
info

This section highlights the steps that are unique to building a portal that is based on the original version (version 1.0),

You can migrate an existing portal based on the original version to take advantage of the features offered by the new version, as described in Migrate to the new version of the portal.

When you create a new portal, it will be based on the new theme, API docs, and developer identity service.

About the sample portal

A sample portal is provided for you to use as a jump-off point. The starter pages contain demo content, based on a fictitious food carts vendor company named StreetCarts, to help inspire your own portal development as you replace the text and images with your unique content. The following shows the home page of the sample portal provided.

Streetcarts

The set of starter pages provided in the sample portal are summarized below:

Page Description
Home Portal home page that describes the APIs that are showcased. Serves as default home page for your portal (index.html).
Get Started First page of a sample set of documentation pages that utilize a drop-down menu.
Set Up Second page of a sample set of documentation pages that demonstrate use of a drop-down menu.
Deploy and Run Third page of a sample set of documentation pages that demonstrate use of a drop-down menu.
Troubleshoot Fourth page of a sample set of documentation pages that demonstrate use of a drop-down menu.
Support Customer support FAQ and contact information.
Terms of Service Sample terms of service page.
APIs List of available APIs. When you generate interative API reference documentation, links to the content are added to this page automatically. See How app developers interact with your portal.

Note: The contents of this page are auto-generated based on the APIs that you publish to your portal. You cannot edit the contents of this page directly; it does not appear in the pages list. You can modify the styling of the page using the theme editor.
My Apps List of registered apps for an authorized user. See How app developers interact with your portal.

Note: The contents of this page are auto-generated based on the registered user apps. You cannot edit the contents of the page directly; it does not appear in the pages list. You can modify the styling of the page using the theme editor
Login Login page for registered users. New users can register from this page by clicking Sign up. See How app developers interact with your portal.

Note: The Login page is included in your portal automatically. You cannot edit the contents of the page directly; it does not appear in the pages list.

Quick tips for customizing the sample portal

Review the following figure to learn some quick tips for customizing the sample portal.

quick tips

As highlighted in the previous figure, the following table summarizes the quick customizations that you can make to the sample portal.

# Customization Description More Info
1 Company logo Customize the "Your Logo" image with your company's logo. Customize the CSS styles for the logo and replace the following image files in file manager by uploading your logo using the same names and relative file sizes:
  • logo.jpg (140 pixels by 40 pixels)
  • mobile-logo.jpg (140 pixels by 40 pixels)
Customize your logo
2 Header menu Update the items in the header menu using the menu editor. Set up navigation
3 Background image Customize the background image on the home page. Customize the CSS styles for the background image and upload your own version of the portal-hero.jpg image in file manager using the same relative file size (1440 pixels by 540 pixels). You can modify the name of the file used in the theme. Customize the background image on the home page
4 Style sheet Update the style sheet to use your own comapny styles in the theme editor. Customize your theme
5 Portal content Edit the content of the portal pages in the page editor. Develop portal content using the page editor
6 Footer menu Update the items in the footer menu using the menu editor. Set up navigation