Forem: Miguel Meza

Introducing LambdaStarter.js

Miguel Meza — Thu, 13 Aug 2020 20:04:09 +0000

If you want to start using AWS Lambda with AppSync Direct Lambda Resolver, I build a useful Starter with different tools to make the best lambdas in the world :D.

LambdaStarter.js

This Starter got everything you need:

AWS SAM
AWS Lambda (with TypeScript)
AWS DynamoDB
AWS Parameter Store
Prettier and Eslint
Semantic Release
and much more.

In my next post, I'll be writing about how to start working with this starter.

Cya!

Semantic Releases with Gitlab CI

Miguel Meza — Tue, 11 Aug 2020 12:20:51 +0000

If you read about Commit Standard and Semantic Versioning for any project from my previous post you'll know what I'm talking about, if not go back and read the post.

In this Post. I'll show you how to configure the same project but now using GitLab CI to create the release version.

First of all, install these two dependencies. We used gitlab-config dependency to configure our repository to handle the release.

npm i -D @semantic-release/gitlab @semantic-release/gitlab-config

Now we need to modify our package.json and add this code. The only difference here is that we don't have *@semantic-release/github *dependency anymore, and for the release, we share or extend the configuration from gitlab-config dependency.

"plugins": [
    "@semantic-release/commit-analyzer",
    "@semantic-release/release-notes-generator",
    "@semantic-release/changelog",
    "@semantic-release/gitlab",
    "@semantic-release/npm",
    "@semantic-release/git"
  ],
  "release": {
    "extends": "@semantic-release/gitlab-config",
    "prepare": [
      "@semantic-release/changelog",
      "@semantic-release/npm",
      {
        "path": "@semantic-release/git",
        "assets": [
          "package.json",
          "package-lock.json",
          "CHANGELOG.md"
        ],
        "message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
      }
    ]
  },

Now, we create a gitlab-ci.yml file in the root of our project to Gitlab configure our pipeline using the instruction in this file.

stages:
  - release

semantic_release:
  image: node:12
  stage: release
  only:
    - master
  script:
    - npm i
    - npx semantic-release

Finally, push your changes to the master branch, and see the magic happens 😜.

Commit Standard and Semantic Versioning for any project

Miguel Meza — Tue, 04 Aug 2020 11:33:43 +0000

One of the biggest problems working with any project is handling commit messages and determinate the next version number of our releases.

We'll add to our project a tool that provides an easy set of rules for creating different commit messages like features, fixes, and breaking changes.

refactor!: drop support for Node 6
docs: correct spelling of CHANGELOG
feat(lang): add polish language
fix: correct minor typos in code

We'll use these commit messages to determine the next version number, generating the release notes, and publishing the packages. As a BONUS, we'll execute this process using Github Actions.

This removes the immediate connection between human emotions and version numbers, strictly following the Semantic Versioning specification.

Prerequisites

Node 10+

Tools

Sematic Versioning 2.0.0

Given a version number MAJOR.MINOR.PATCH, increment the:
MAJOR version when you make incompatible API changes,
MINOR version when you add functionality in a backward-compatible manner, and
PATCH version when you make backward-compatible bug fixes.

Commitizen

Fill the required commit field at commit time.

Conventional changelog

Generate changelogs and release notes from a project's commit messages and metadata.

Husky

To check bad commits.

Commitlint

It helps your team adhering to a commit convention. By supporting npm-installed configurations, it makes sharing of commit conventions easy.

Commitlint - Config conventional

Configuration for Commitlint to enforce conventional commits.

Sematic Release

Automates the whole package release workflow, including determining the next version number, generating the release notes, and publishing the package.

Dependencies

Install global dependencies

npm i -g commitizen
npm i -D husky @commitlint/cli @commitlint/config-conventional @semantic-release/git @semantic-release/changelog @semantic-release/commit-analyzer @semantic-release/release-notes-generator @semantic-release/npm

Steps

Execute commitizen init cz-conventional-changelog -D -E this will add the dependencies of cz-conventional-changelog and update our package with the configuration:

"config": {
  "commitizen": {
    "path": "./node_modules/cz-conventional-changelog"
  }
}

Update package.json to Husky check if the commits follow the conventional standard using commitlint

"husky": {
  "hooks": {
    "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
  }
},
"commitlint": {
  "extends": [
    "@commitlint/config-conventional"
  ]
}

Now you can check using git cz to commit instead of git commit -m "uggly message"

Sematic versioning with Github Action

Create a Personal Access Token with "Repo" permissions

In Github → Settings → Developer settings → Personal access tokens → Generate new token

Create a new key GH_TOKEN and the value of the new generated token

In your Repository → Settings → Secrets → New secret

Update the package.json with this code

"plugins": [
  "@semantic-release/commit-analyzer",
  "@semantic-release/release-notes-generator",
  "@semantic-release/changelog",
  "@semantic-release/github",
  "@semantic-release/npm",
  "@semantic-release/git"
],
"release": {
  "prepare": [
    "@semantic-release/changelog",
    "@semantic-release/npm",
    {
      "path": "@semantic-release/git",
      "assets": [
        "package.json",
        "package-lock.json",
        "CHANGELOG.md"
      ],
      "message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
    }
  ]
},

Create a folder in the root of your project .github/workflows with this code.

name: Semantic release

on:
  push:
    branches:
      - master
jobs:
  publish:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Setup Node.js
        uses: actions/setup-node@v1
        with:
          node-version: 12
      - name: Install dependencies
        run: npm install
      - name: Semantic release
        env:
          GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
        run: npx semantic-release

Now, push your changes to your repo and see in actions.

The command npx semantic-release will analize our commits, generate release notes, update our changelog and generate the release in Github with the information in commits and finally update the version in our package.json.

Feel free to ask any questions you had.

Bye!

Setup Apollo Graph Manager in GraphStarter.js

Miguel Meza — Mon, 27 Apr 2020 17:52:01 +0000

The advantage of using Apollo Stack provides us a complete suite of tools, and one of them is Graph Manager.

Apollo Graph Manager is a SaaS service where we can monitor, validate, and secure our graph data schemes. For example, we can trace all the expensive queries on our server.

If you want to know more about Graph Manager or understand more his features, see this video:

The documentation can find it here:
https://www.apollographql.com/docs/graph-manager/

The bad news is Graph Manager charges us for some features, but the good news is these features are for advanced production environments, so for now, the free tier account is enough. The detail of pricing is here: https://www.apollographql.com/pricing/

Settings in GraphStarter.js

For my GraphQL projects, I use GraphStarter.js. This starter works with a set of tools for fast coding and bypasses the initial setup of any new framework or tool.

For setting Apollo Graph Manager in our GraphStarter.js project, we must do these steps:

Create an account in Apollo Graph Manager Signup
Once you finish, enter to the Apollo Graph Manager Dashboard with your credentials.
Create a new Project clicking in "New Graph" and insert a name.
Now, we must publish our Schema on the platform. Ignore this window and click on "Done".
After closing the modal, in the left menu, click in "Personal Settings" a go to the section "Personal API Key" and click "Create New Key".
Copy the key, go to .env file in GraphStarter project, and replace the value of the key APOLLO_KEY for the new one.
Let's run our graph server now:

npm start

In other window, execute the command below:

npx apollo service:push --graph=GraphStarter --endpoint=http://localhost:4000

The difference with the command in the modal is we aren't not using —key because we set the value in the environment var.

If everything works ok, we must see this response:

If you want to know how to make this process in your CI follow these instruction documented here: https://www.apollographql.com/docs/graph-manager/schema-registry/

Lets back to the Dashboard, and we can see that everything is ready.
In this last step, we're going to enable the metrics of our queries in real-time for the full power of Graph Manager.
In the image above, click in "Instructions".
We see a new modal, copy the engine.apiKey, and create a new environment var in .env file, and call it ENGINE_API_KEY=
Save the file, restart the server and wait a few moments
Now we can monitor our queries in the section "Metrics".

REMEMBER the .env file must not upload to our repository, in this case, is uploaded because it is boilerplate. The main idea behind this is to set the variables in your Secret Manager for the CI.

Updating ReactNativeExpo.js v1 to v2

Miguel Meza — Mon, 20 Apr 2020 16:20:24 +0000

Sadly, version 1 of the ReactNativeExpo.js has gone to the end because of continuous breaking changes of Expo and React Native, but don't be alarm yet, this is not a bad thing, is just version 1 is no more supported.

Never the less, we are making some changes to the project to fulfill all the need for the continuous function of the project, let's call it version 2 now.

Note aside; this guide is for migrating from version 1 to version 2. If you want to start from fresh from version 2, follow the instruction on the repository.

If you are still here, let's continue:

Version 1 to version 2

I split the migration into three parts; files that need delete, create, and must make some changes. Let's go:

Files to Delete

package-lock.json
.babelrc
docs
src/assets/native-base-theme:

Because of the update of Native-Base, for working correctly, we must delete de folder src/assets/native-base-theme and copy the new one.

    rm -rf ./src/assets/native-base-theme
    node node_modules/native-base/ejectTheme.js
    mv ./native-base-theme ./src/assets/native-base-theme

File to Create

index.js

    import { registerRootComponent } from 'expo';

    import App from './App';

    // registerRootComponent calls AppRegistry.registerComponent('main', () => App);
    // It also ensures that whether you load the app in the Expo client or in a native build,
    // the environment is set up appropriately
    registerRootComponent(App);

.buckconfig

    [android]
      target = Google Inc.:Google APIs:23

    [maven_repositories]
      central = https://repo1.maven.org/maven2

babel.config.json

Handle the responsibility that one day has .babelrc

    module.exports = function (api) {
      api.cache(true);
      return {
        presets: ['babel-preset-expo'],
        plugins: [
          [
            'module-resolver',
            {
              root: ['./'],
              alias: {
                '@app': './src/app',
                '@assets': './src/assets',
                '@common': './src/common',
                '@components': './src/components',
                '@constants': './src/constants',
              },
            },
          ],
        ],
      };
    };

.gitattributes

    *.pbxproj -text

.prettierignore

    package.json
    package-lock.json
    .vscode/*

.prettierrc

    {
      "bracketSpacing": true,
      "semi": true,
      "singleQuote": true,
      "trailingComma": "es5",
      "printWidth": 80,
      "tabWidth": 2
    }

File to replace

package.json

With all dependencies updated.

    {
      "name": "react-native-expo-starter",
      "homepage": "https://github.com/migu33l/React-Native-Expo-Starter",
      "version": "2.0.0",
      "devDependencies": {
        "@babel/core": "^7.9.0",
        "eslint": "^6.8.0",
        "eslint-config-airbnb-base": "^14.1.0",
        "eslint-config-prettier": "^6.10.1",
        "eslint-import-resolver-babel-module": "^5.1.2",
        "eslint-plugin-flowtype": "^4.7.0",
        "eslint-plugin-import": "^2.20.2",
        "eslint-plugin-prettier": "^3.1.3",
        "eslint-plugin-react": "^7.19.0",
        "eslint-plugin-standard": "^4.0.1",
        "prettier": "^2.0.4",
        "redux-logger": "^3.0.6",
        "schedule": "^0.5.0"
      },
      "main": "index.js",
      "scripts": {
        "android": "react-native run-android",
        "ios": "react-native run-ios",
        "web": "expo start --web",
        "start": "expo start",
        "test": "jest"
      },
      "dependencies": {
        "@expo/vector-icons": "^10.0.6",
        "@react-native-community/async-storage": "^1.9.0",
        "axios": "^0.19.2",
        "babel": "^6.23.0",
        "babel-eslint": "^10.1.0",
        "babel-plugin-module-resolver": "^4.0.0",
        "expo": "~37.0.3",
        "expo-splash-screen": "^0.1.1",
        "expo-updates": "~0.1.0",
        "native-base": "2.13.8",
        "prop-types": "^15.7.2",
        "react": "~16.9.0",
        "react-dom": "~16.9.0",
        "react-native": "~0.61.5",
        "react-native-gesture-handler": "~1.6.0",
        "react-native-reanimated": "~1.7.0",
        "react-native-screens": "~2.2.0",
        "react-native-unimodules": "~0.9.0",
        "react-native-web": "~0.11.7",
        "react-redux": "^7.2.0",
        "redux": "^4.0.5",
        "redux-persist": "^6.0.0",
        "redux-thunk": "^2.3.0"
      },
      "private": true
    }

packager-info.json

    {
      "devToolsPort": 19002,
      "expoServerPort": null,
      "packagerPort": null,
      "packagerPid": null,
      "expoServerNgrokUrl": null,
      "packagerNgrokUrl": null,
      "ngrokPid": null,
      "webpackServerPort": null
    }

settings.json

    {
      "hostType": "lan",
      "lanType": "ip",
      "dev": true,
      "minify": false,
      "urlRandomness": "xe-t27",
      "https": false
    }

src/app/store.js

In the last version of redux-persist@~6 the storage is not compatible and brings us an exception (AsyncStorage exception). You got two options:

Use redux-persions@~5, and no code must be changed.
Use redux-persist@~6, and must do these changes to store.js file.

    // before
    ...
    import storage from "redux-persist/es/storage";
    ...

    // after
    ...
    import { AsyncStorage } from "react-native";
    ...

    // before
    ...
    const config = {
      key: "root",
      storage,
      blacklist: ["status"]
    };
    ...

    // after
    ...
    const config = {
      key: "root",
      storage: AsyncStorage,
      blacklist: ["status"]
    };
    ...

src/assets/fonts/Questrial-Regular.ttf

Changed his name for Questrial.ttf

.gitignore

    # OSX
    #
    .DS_Store

    # Xcode
    #
    build/
    *.pbxuser
    !default.pbxuser
    *.mode1v3
    !default.mode1v3
    *.mode2v3
    !default.mode2v3
    *.perspectivev3
    !default.perspectivev3
    xcuserdata
    *.xccheckout
    *.moved-aside
    DerivedData
    *.hmap
    *.ipa
    *.xcuserstate
    project.xcworkspace

    # Android/IntelliJ
    #
    build/
    .idea
    .gradle
    local.properties
    *.iml

    # node.js
    #
    node_modules/
    npm-debug.log
    yarn-error.log

    # BUCK
    buck-out/
    \.buckd/
    *.keystore

    # fastlane
    #
    # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
    # screenshots whenever they are needed.
    # For more information about the recommended setup visit:
    # https://docs.fastlane.tools/best-practices/source-control/

    */fastlane/report.xml
    */fastlane/Preview.html
    */fastlane/screenshots

    # Bundle artifacts
    *.jsbundle

    # CocoaPods
    /ios/Pods/

    # Expo
    .expo/*
    /web-build

App.js

    import * as React from 'react';
    import { AppLoading } from 'expo';
    import * as Font from 'expo-font';
    import { Ionicons } from '@expo/vector-icons';

    import { Provider } from 'react-redux';
    import { PersistGate } from 'redux-persist/es/integration/react';
    import { StyleProvider } from 'native-base';
    import { StatusBar, Platform } from 'react-native';

    import getTheme from '@assets/native-base-theme/components';
    import theme from '@assets/native-base-theme/variables/commonColor';

    import configureStore from '@app/store';
    import Loading from '@components/loading/Loading';
    import Dashboard from '@components/dashboard/Dashboard';

    const { persistor, store } = configureStore();

    if (Platform.OS === 'android') StatusBar.setHidden(true);

    export default class App extends React.Component {
      constructor(props) {
        super(props);

        this.state = {
          isReady: false,
        };
      }

      async componentDidMount() {
        await this.loadFonts();
      }

      async loadFonts() {
        await Font.loadAsync({
          Roboto: require('native-base/Fonts/Roboto.ttf'),
          Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
          Questrial: require('@assets/fonts/Questrial.ttf'),
          ...Ionicons.font,
        });

        this.setState({ isReady: true });
      }

      render() {
        if (!this.state.isReady) {
          return <AppLoading></AppLoading>;
        }

        return (
          <Provider store={store}>
            <PersistGate loading={<Loading />} persistor={persistor}>
              <StyleProvider style={getTheme(theme)}>
                <Dashboard />
              </StyleProvider>
            </PersistGate>
          </Provider>
        );
      }
    }

app.json

    {
      "name": "React Native Expo Starter",
      "displayName": "ReactNativeExpoStarter",
      "expo": {
        "name": "React Native Expo Starter",
        "slug": "React-Native-Expo-Starter",
        "icon": "src/assets/images/app-icon.png",
        "version": "2.0.0",
        "orientation": "portrait",
        "platforms": ["ios", "android", "web"],
        "assetBundlePatterns": ["**/*"]
      }
    }

Final Step

So we're done, let execute these commands:

    # remove dependencies
    rm -rf node_modules

    # for clean npm cache
    npm cache clean --force

    # install dependencies
    npm i

    # expo start
    npm start

And that its, everything must do ok.

If you had any doubt, don't hesitate and contact me, or better, contribute to this project, making changes and PR.

Extra

Version 2 of this project has disabled react-native by default (for the moment) because it has some problems with ScreenSplash.

In the meantime, if you want to fix these problems, this must-do first:3 install.

    # install the expo client
    npm install --global expo-cli

    # create a new project
    expo init my-project

    # copy the folder from my-project/ios and my-project/android and paste in the root of the project

    # if you want to test ios, first must install CocoaPods and execute this command
    pod install

    # modify the package.json and add this 2 lines underline scripts
            "android": "react-native run-android",
        "ios": "react-native run-ios",

    # now you can run ios and android nativly
    npm run ios
    npm run android