DEV Community: Erdenezayaa

How to set up a simple CI/CD for AWS CDK projects

Erdenezayaa — Sat, 20 Aug 2022 16:26:00 +0000

I've recently found out there is really easy way to set up simple CI/CD for cdk projects. Like most things with AWS, I felt like there aren't enough guides and tutorials about it. So I'm sharing my experience on how I did it.

Problem

My team and I has been experiencing major slowdown in our cdk deployments recently. We all have our own development sandbox account we deploy to. Deployments doesn't take long in our own environments. Because it is fairly incremental and small updates we're deploying. It takes 1-2 minutes most of the time. But when we done testing in our environment, we deploy to shared staging environment for more testing and QA. So each developer has to deploy from their own machines. Our staging deployments can take 10-20 minutes each time. So I always wondered, why does it take so long in staging. Then I've noticed from my cdk logs that when we deploy from different machines, cdk updates its metadata in every stack we have on our project. Even the stacks that doesn't have any changes gets updated. On the contrary, when we make 2 consecutive deployments from the same machine, it takes 1-2 minutes like our own environments. So I decided to automate our staging deployment process with AWS Pipeline.

Solution

I've had some experience building a simple CI/CD using AWS CodeCommit, CodeBuild, CodeDeploy and Pipelines etc. Because I built it manually from AWS Web Console, I remember it being not that easy to set up.

Then I've realized that easiest and most convenient way to build must be the CDK itself. The CDK has many different constructs for building CI/CD pipelines. Most of them for individual services that is part of the pipeline.

Then there is a CDK contruct library called CDK Pipelines (aws-cdk-lib.pipelines) which has higher level of constructs that integrates many different aws services and their CDK constructs together. It is opinionated library that purposely built for deploying cdk applications. They states it perfectly clear in the documentation that this library is not suitable for highly customizable CI/CD pipelines.

A construct library for painless Continuous Delivery of CDK applications.
CDK Pipelines is an opinionated construct library. It is purpose-built to deploy one or more copies of your CDK applications using CloudFormation with a minimal amount of effort on your part. It is not intended to support arbitrary deployment pipelines, and very specifically it is not built to use CodeDeploy to applications to instances, or deploy your custom-built ECR images to an ECS cluster directly: use CDK file assets with CloudFormation Init for instances, or CDK container assets for ECS clusters instead.
Give the CDK Pipelines way of doing things a shot first: you might find it does everything you need. If you want or need more control, we recommend you drop down to using the aws-codepipeline construct library directly.
Full documentation

So I felt this is good enough for us as starting point. So we decided to build our CI/CD with it.

How to do it?

Before writing any code we need to set up authentication method for AWS Pipeline to pull our repositories from Github.

1. Create personal access token
Go to https://github.com/settings/tokens to create personal access token with right permissions

2. Save the token under the name of github-token in AWS Secrets Manager in your AWS account.

3. Set up the pipeline with CDK Pipelines

Here is an typescript code example of CDK Pipelines



import { Stack, StackProps } from 'aws-cdk-lib';
import { Construct } from 'constructs';
import { CodePipeline, CodePipelineSource, CodeBuildStep } from 'aws-cdk-lib/pipelines';
import * as iam from 'aws-cdk-lib/aws-iam';
import { ComputeType } from 'aws-cdk-lib/aws-codebuild';

export class CodePipelineStack extends Stack {
  constructor(scope: Construct, id: string, props?: StackProps) {
    super(scope, id, props);

    const pipeline = new CodePipeline(this, 'Pipeline', {
      pipelineName: 'CorePipeline',
      selfMutation: false,
      synth: new CodeBuildStep('DeploymentStep', {
        input: CodePipelineSource.gitHub('OWNER/REPO', 'branch_name'),
        commands: [
          'npm ci',
          'npx cdk synth',
          'npm run deploy-ci'
        ],
        buildEnvironment: {
          computeType: ComputeType.LARGE,
        },
        rolePolicyStatements: [
          new iam.PolicyStatement({
            effect: iam.Effect.ALLOW,
            actions: ['*'],
            resources: ['*'],
          }),
        ],
      })
    });

  }
}

selfMutation: false
If set to true, it will deploy your application everytime you make changes to the pipeline and also automatically adds cdk deploy command to the scripts. I'd rather turn it off because I have custom build scripts in our project. Also I don't want unnecessary deployment when I'm initially setting up the pipeline
computeType: ComputeType.LARGE
Here you can choose what type of instance you want to use for your deployment. Instance types and its pricing can be found from CodeBuild documentation
rolePolicyStatements: [
  new iam.PolicyStatement({
    effect: iam.Effect.ALLOW,
    actions: ['*'],
    resources: ['*'],
  }),
],
Here is the part I'm not really proud of at the moment. The Codebuild needs the necessary IAM permissions to deploy your stacks to the CloudFormation. I expected these permissions would be handled by CDK itself. But I got permissions error during my initial deployments. It is a temporary workaround for that.

And deploy. You can see your deployment results from AWS Pipeline dashboard

That is it folks. I hope you find this helpful.

Sources
Continuous integration and delivery (CI/CD) using CDK Pipelines
CDK Pipelines

React Native: Optimizing FlatList performance

Erdenezayaa — Thu, 09 Sep 2021 02:29:23 +0000

Flatlist is react-native component should be used for rendering scrollable lists. If you don't optimize well enough, performance starts to drop once dataset gets large. This causes laggy scroll and blank spaces between the list items.

1. Avoid inline functions

Inline functions are recreated every time component renders. This may be okay for some components but can slow performance for flatlists.

Avoid this!

return (
  <Flatlist
   data={data}
   renderItem={({item}) => <Item item={item} />}
   keyExtractor={(item) => item.id}
  />
);

Instead use this

const renderItem = ({item}) => <Item item={item} />;
const keyExtractor = (item) => item.id;
return (
  <Flatlist
   data={data}
   renderItem={renderItem}
   keyExtractor={keyExtractor}
  />
);

2. Provide height value for every item

If you don't provide getItemLayout function as props, Flatlist have to calculate height for every item in the list. By the result of this, sometimes when you scroll fast enough, you will see some gaps in the list. By providing our own getItemLayout function, it won't have to calculate every item's height and the performance will improve.

const ITEM_HEIGHT = 65; // fixed height of item component
const getItemLayout = (data, index) => {
  return {
    length: ITEM_HEIGHT,
    offset: ITEM_HEIGHT * index,
    index,
  };
};
return (
  <Flatlist
   data={data}
   renderItem={renderItem}
   getItemLayout={getItemLayout}
   keyExtractor={keyExtractor}
  />
);

3. Keep component that renders the list item as light as possible

Don't do any extra work in renderItem function like formatting the data and declaring another function. Also props you pass to renderItem should be only the data that will render in the UI.
In this example, Item component is formatting the date with moment which is heavy js library that should be avoided, formatting a number value right before rendering and getting really big navigation as props every time. All of these, should be avoided to keep the Item component light.
Don't do!

const Item = ({item, navigation}) => {
  const created_at = moment(item.created_at).format('YYY/MM/DD HH:mm');
  const total_value = formatNumber(item.total);
  // it is common to pass navigation instance of react-navigation library, avoid this because navigation props is too big
  const onPressItem = () => {
    navigation.navigate('DetailItem', {item});
  };
  return (
    <View>
     ...
    </View>
  );
}

const renderItem = ({item}) => <Item item={item} navigation={navigation} />;

return (
  <Flatlist
   data={data}
   renderItem={renderItem}
   getItemLayout={getItemLayout}
   keyExtractor={keyExtractor}
  />
);

Do this

const Item = ({item, onItemPress}) => {
  return (
    <View onPress={onItemPress(item)}>
     ...
    </View>
  );
}

// Handle item press event in parent component that has already access to navigation component
const onItemPress = (item) => {
  navigation.navigate('ItemDetail');
};

const renderItem = ({item}) => <Item item={item} navigation={navigation} />;
// do the data formatting and manipulation before the flatlist render
const preparedData = data.map((item) => {
  const created_at = moment(item.created_at).format('YYY/MM/DD HH:mm');
  const total_value = formatNumber(item.total);
  // only return the properties that need to be rendered and leave everything else
  return {
    label: item.label,
    total_value,
    created_at,
  };
});
return (
  <Flatlist
   data={preparedData}
   renderItem={renderItem}
   getItemLayout={getItemLayout}
   keyExtractor={keyExtractor}
  />
);

4. Use Pure Component or Memo

PureComponent re-renders a component by shallow comparing the props and re-renders only if the props have changed. PureComponent is used for class components. React memo is the alternative to PureComponent for functional components.

5. Use cached optimized images

If your list have lots of images, you should use optimal size d, cached images. You can use libraries like react-native-fast-image to implement this. These libraries can do following things.

resize images according to device dimensions, therefore reduces the memory consumption.
Caches images to memory and storage to better load times.

Keep in mind it works better when you have already optimized images for different sizes of devices.

Conclusion

In my experience, those methods really improved the performance of the Flatlist. I hope you find this helpful. If these methods didn't help, you should checkout the sources I used for this article.

Sources:

Official Documentation for Optimizing Flatlist Configuration
8 ways to optimize React native FlatList performance

React Native OTA update: How to deploy new version of your app in 1 minute?

Erdenezayaa — Sun, 11 Jul 2021 18:49:18 +0000

This article was written in 2021. Since then Microsoft has decided to retire AppCenter and CodePush services. So I recommend everyone to consider migrating to Expo EAS Update.
https://expo.dev/blog/how-to-replace-app-center-and-codepush

One of the biggest challenges for an app that is already in production is delivering a new version of the app to its customers quickly. Especially if bug is detected that needs to be corrected immediately, failure to fix the bug as soon as possible can result in the loss of new customers, loss of sales, some financial loss, and negative customer experience. Even though the developers quickly updated the new version of the app, it can take up to 2-7 business days for the appstore and playstore to review. Well, after 2-7 days, the new version will be available in the playstore, but it will probably take up to a week for all users to install the update.

Solution

For React Native, this issue can be resolved with the OTA Update.
Over the Air (OTA) update is the ability to quickly deliver a new version of an app that bypasses the appstore and playstore review process. With just one line of commands, you can deploy a new version of the app in 1 minute.

Let me explain why is this possible on react-native.

The React Native app consists of two parts: native and javascript code. When building an app, all javascript code is compiled and the index.android.bundle and index.ios.bundle files are created for android and ios platform.

With Over the Air update, you can download and update index.android.bundle and index.ios.bundle files directly from the server. However, it is important to note that native code cannot be updated with ota update. If the native code has been changed or a new native library has been added, the update must be deployed using the appstore and playstore.

How to implement?

For apps built with Expo, OTA update is already built in expo sdk.
https://docs.expo.io/guides/configuring-ota-updates/

For bare react-native apps, OTA update can be implemented using a free service called CodePush from Microsoft's Appcenter platform.

Appcenter is a CI (Continuous Integration)/CD (Continuous Deployment) and Monitoring service from Microsoft's Azure Cloud for desktop and mobile application.
CodePush is a free service that allows you to implement ota updates in Cordova and React-Native applications.

1. Register with Appcenter

Create an account in appcenter.ms. You can easily create an account using your Github, Microsoft, Google, or Facebook account.

2. Create an appcenter app

Create a separate app for android and ios within the Appcenter console. To create an app, select react-native on the platform option.

3. Create a deployment

Go to the android and ios app you created and select CodePush from the Distribute menu. Click the Create standart deployment button to create production and staging deployment.

4. Install the Appcenter cli

Install the Appcenter cli tool on your local machine. Install this tool from your terminal using npm.



$ npm install -g appcenter-cli

If appcenter-cli is installed, then login. After giving the login command, the browser will let you login and show authentication code. Use that code to log in with a cli.



$ appcenter login



$ appcenter apps list
d.erdenezaya-gmail.com/example-app-android
d.erdenezaya-gmail.com/example-app-ios
// apps previously created on the appcenter console look like this
// Instead of d.erdenezaya-gmail, there is an organization that created a username or project.

Check the created deployment and note the key. You will then need these secret keys to set up your react-native project.



$ appcenter codepush deployment list -k --app d.erdenezaya-gmail.com/example-app-android



$ appcenter codepush deployment list -k --app d.erdenezaya-gmail.com/example-app-ios

5. Install the react-native-code-push library

There are many configurations to install this library depending on the react-native version or android, ios, so read the official documentation carefully.

https://docs.microsoft.com/en-us/appcenter/distribution/codepush/rn-get-started

Be sure to set the key mentioned in the previous step.

6. Use CodePush library in the react-native app

The easiest way to configure CodePush is to wrap the App.js component. This way CodePush will check if there is an update when the app starts and will update your app in background without noticing the user.



import codePush from "react-native-code-push";

class MyApp extends Component {
}}

MyApp = codePush (MyApp)

You can also check your updates manually and show the download progress to user. Also you can decide when to update depending on your update information.

7. Finally update

Once you've set up the react-native-code-push directory where you installed the appcenter cli, all you have to do now is deploy the actual update. To deploy, simply open the terminal in the root folder of your react-native project and run the following command.



$ appcenter apps list
d.erdenezaya-gmail.com/example-app-android
d.erdenezaya-gmail.com/example-app-ios
// apps previously created on the appcenter console look like this
// Instead of d.erdenezaya-gmail, there will be a name of organization or username that created the project.
// Staging Release (android)
$ appcenter codepush release-react --mandatory -a d.erdenezaya-gmail.com/example-app-android -d Staging
// Staging Release (ios)
$ appcenter codepush release-react --mandatory -a d.erdenezaya-gmail.com/example-app-ios -d Staging
// For production release, just change -d Production.

Those command will create a bundle of javascript code and uploads it to the azure cloud storage server. So the app will check the appcenter server for updates, download the javascript bundle from azure's storage server, and update the app.

That's it. Just use the one line command above to release a new version of the app in just 1 minute.