Best Practices, Tips and Next Steps

Developers can follow these guidelines and simplify the application development process, its management, and its reviewing and approval process while building their applications.

1. Use Venus Components Library: For building the UI, we strongly recommend to use Venus Components Library as it provides various UI components of contentstack. It makes the app’s UI consistent with Contenstack.

2. Define Project Structure: While building a project, defining a scalable project structure is essential. The architecture and infra of the project depends on your app’s complexity. Define reusable components as smaller as possible to make it available in all the higher order of other components. You can use component-centric structure or any other structure of your choice. For larger UI projects, it's better to define themes for CSS and use it across the app.

3. Follow Naming Conventions: Throughout the project, follow standard naming conventions. Developers can use the Pascal case to name components and Camel case to name the functions/ methods inside the components. Also for functions/methods used within a file locally can be prefixed with an underscore _. For temporary variables that are used in loops or anonymous functions, snake case can be used.

4. Thorough E2E code testing: Avoid potential errors by thorough automated test cases. To provide a quality experience to end users, a good end to end automated testing is suggested strongly. You can also use linters, pre-commit hooks to avoid syntax errors in code during the development phase itself.

5. Logging and Monitoring: Writing logs helps to analyze various analytics and performance of the app. As a best practice, you can even use one of suitable logging libraries available. Its recommended to write detailed log events and avoid logging sensitive data/credentials.

6. App Security:Apps should have the capability to encrypt data exchanged over the internet using HTTPS.Store client ID and client secret keys securely. We suggest you store them as environmental variables. It is mandatory for OAuth Apps to authenticate using an OAuth token.Also, it is highly recommended to use App signing feature for apps that have backend APIs to interact with the 3rd party systems. App signing is the feature/method through which the app can verify whether it is loaded inside contentstack only. When the app signing feature is enabled, Contentstack will attach an app-token in the source URL of the app iframe where it is loaded. Users can fetch the app-token, decode and verify it to confirm that the request is from Contentstack. This can prevent any other attackers from loading the app on their site. For verifying the app-token, you might need a public key. Below is the code snippet explaining the logic to verify the app-token from Contentstack.

const jwt = require("jsonwebtoken");
const appToken = req.params["app-token"];
const publicKey = (
  await axios("https://app.contentstack.com/.well-known/public-keys.json")
).data["signing-key"];
try {
  const {
    app_uid,
    installation_uid,
    organization_uid,
    user_uid,
    stack_api_key,
  } = jwt.verify(appToken, publicKey);
  console.info("app token is valid!");
} catch (e) {
  console.error(
    "app token is invalid or request is not initiated from Contentstack!"
  );
}

Next Steps

You can look into implementing OAuth with marketplace apps. If OAuth is enabled for an app, then contentstack will redirect to the OAuth endpoint upon installation by providing the access tokens and refresh tokens, which the apps can save in backend and use in future to communicate with Contentstack for authenticated actions.

Deploying and Hosting Your Application

Once the app is developed, for building the app, you can execute npn run build command will result in creation of a build folder inside the project’s root directory. The contents of this build directory can be hosted in any of the static file hosting servers like AWS S3, for making the app publicly accessible on a hosted environment. Alternatively you can host your APP using Contentstack Launch, too. If you want to learn more about the Contenstack Launch service, please visit our documentation.