If you want to show the code coverage of your Angular project, this tutorial is the way to go.

Prerequisites

In this tutorial we’ll be using Travis-CI & codecov. So create the corespondent accounts & add your project.

Setup

For this example, I’ll start by creating a new angular application. Following that, let’s add codecov as a dev-dependency:

$ ng new angular-app-codecov
$ cd angular-app-codecov
$ npm i -D codecov

Next, let’s setup Karma. Remember we need to run the test coverage on Travis-CI. So, we need to run Chrome in Headless Mode. Let’s edit Karma.conf.js which is located in the root of the project. Add these new lines to your config:

Create a file .travis.yml which contains the CI script to run in the build.

Add the following script:

language: node_js
node_js:    
  - "12"
addons:
  chrome: stable
env:
  global:
    CODECOV_TOKEN=$CODECOV_TOKEN    
before_script:
  - npm install 
jobs:
  include:
    - stage: Test coverage
      script:
        - ng test --browsers=ChromeHeadlessNoSandbox --codeCoverage=true --watch=false
      after_script:
         - if [[ "$TRAVIS_TEST_RESULT" == 0 ]]; then ./node_modules/.bin/codecov; fi

Connect to your codecov account, search for your repository & add it. You’ll see a token ( see image below), that’s the token Travis will use to upload your code coverage report to codecov.

Next, let’s add that token to Travis-CI. So, connect to your Travis-CI account, add the repository & go to settings. Let’s add an environment variable CODECOV_TOKEN to the build & let’s give it the value of the codecov token.

And that’s it, all that’s left is to trigger the build manually or add a commit to see the coverage report of your project.

Badge

The last thing you probably want to to is to add the badge on your project:

On codecov, go to your project settings. Under ‘badge’ copy the markdown snippet & paste it in your README.md

And That’s it. If you face any issue leave a comment or open an issue in the Github repository.

The website speed makes the first impression about your business. Low website speed is one of the most frustrating things that will turn people off about your resource.

In this article we’ll only talk about React apps optimization.

Webpack-bundle-analyzer speed optimization

Webpack-bundle-analyzer is a webpack plugin which helps you visualize the size of your bundles with an interactive zoom-able tree-map.

Webpack-bundle-analyzer helps you:

1. Explore the content of your bundles.
2. Find out the biggest modules in your bundles.
3. Find out unused/unwanted modules.

Adding webpack-bundle-analyzer to create-react-app 1

To use Webpack-bundle-analyzer we need first to install webpack-bundle-analyzer:

npm i -D webpack-bundle-analyzer
# OR
yarn add -D webpack-bundle-analyzer

Then, let’s create a file analyse.js at the root of the repository with the following content:

You can now test your little script with just running the command:

node analyse.js

Let’s make it more sophisticated & add a script entry to our package.json. Under scripts add the following line:

“scripts”: {
   ...

   “analyse”: “node analyse.js”,

   ...

},

Now, you can run webpack-bundle-analyzer with just npm run analyse Or yarn analyse .

Adding webpack-bundle-analyzer to create-react-app 2 & 3

create-react-app 2 & 3 are using a different configuration of webpack than the first version. So, we need to change a little the script we used above:

You can also add the analyse script entry in your package.json.

And That’s it. If you face any issue leave a comment or open an issue in this repository.

links:

• Portfolio
• Github
• Twitter

👉 Don’t forget to clap if you like the post

Before starting, I’m assuming you’re familiar with Ionic & Ionic CLI (just the basic commands to start a project).

Let’s start by creating a simple ionic ionic project from the blank template.

$ ionic start ionic-travis-gh-pages blank

Now let’s put the project in GitHub. Create a new project , I chose ionic-travis-gh-pages. Then, let’s push our repository from the command line (Just the follow the instructions in GitHub).

In my case, this what I’ve done:

$ cd ionic-travis-gh-pages
$ git remote add origin https://github.com/hamzahamidi/ionic-travis-gh-pages.git
$ git push -u origin master

Before we move on to Travis-CI, we need to do generate a token for Travis to give it the access to our public repository. So, go to Personal access tokens (just follow the link).

Click on generate a new token: give a description to the token, you can choose whatever you want, I chose travis-token. Then click on public_repo in repo.

Just make sure to copy your new personal access token because you won’t be able to see it again!

Just store the token somewhere else we’ll need it once we set up the project in Travis.

Let’s move on to create a Travis account. Follow this link.

You need to go now to your profile & click on the button sync account (check the image below) so that you synchronize your GitHub account with Travis.

Down below, you have a list of your public GitHub repositories. Search for the ionic project we just created.

Click on the ionic project & go to its settings. Now, in the section Environment Variables, add a new variable call it GITHUB_TOKEN & in the value give it the token we generated before in github Personal access tokens (check the image below).

In the root of your project create file .travis.yml & copy the following content:

language: node_js
node_js:
 — “8.9.4”

branches:
 only:
 — master

before_script:
 — npm install -g ionic
 — npm ci 

script:
 — ionic build --prod -- --base-href ./

deploy:
 provider: pages
 skip-cleanup: true
 github-token: $GITHUB_TOKEN 
 keep-history: true
 on:
   branch: master
 local_dir: www

I’ll quickly summarize these configurations.

branches:only: means the branches where you want to run the builds. Here I only chose the master branch.

before_script: These are the commands that run before the build step. Here I just install ionic& the dependencies of the project.

script: The build step where we generate a production build of the application. Here we generate the build for the web application.

For more information the doc is the best place.

Now we commit the changes & push them the repository:

$ git add .travis.yml
$ git commit -m "ci: Add Travis-CI" 
$ git push origin master

Now, go to your Travis profile, Click on the Sync account button & activate the builds in the ionic project (just turn the switch on). The build we’ll trigger automatically, if not just trigger it manually with button inside more options.

If the build passes, go to your GitHub repository settings. Under GitHub Pages choose the branch where you want to deploy from & choose gh-pages (check the image below).

Here’s the link of my Github project.

links:

• Portfolio
• GitHub
• Twitter

👉 Don’t forget to clap if you like the post

What I’m going to show you in this article is how to customize your bootstrap your liking!

Now, I know you can find multiple Bootstrap themes where the only work you have to do is to download the customized version. Like for example Bootswatch (https://bootswatch.com/).

Yes, It’s much easier to use. All you have to do is to simply download the CSS file and replace the one in Bootstrap. But in case of you to create your own theme & use it in Angular project, follow these steps:

Getting Started

Create a new project and navigate into the project:

ng new my-app --style=scss
cd my-app

Install Bootstrap

# version 3.x
npm install bootstrap-sass --save

# version 4.x
npm install bootstrap@next --save

Configuring Project

Create an empty file _variables.scss in src/.

If you are using bootstrap-sass, add the following to _variables.scss:

$icon-font-path: '../node_modules/bootstrap-sass/assets/fonts/bootstrap/';

In styles.scss add the following:

// version 3
@import 'variables';
@import '../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap';

// version 4
@import 'variables';
@import '../node_modules/bootstrap/scss/bootstrap';

Testing Project

Now to test if your changes are taking effect: open app.component.html and add the following markup:

<button class="btn btn-primary">Test</button>

Run ng serve to run your application. In your browser navigate to the application localhost:4200. Open _variables.scss and add the following:

// If bootstrap version 3
$brand-primary: red;

// If bootstrap version 4
$primary: red;

Return to the browser to see the font color changed. The primary color is supposed to be Blue. With our change the color of primary becomes now Red.

To see the list of variables of Bootstrap. Here’s the list for version 3 & Here’s the link of instructions for Version 4.

links:

• Portfolio
• Github
• Twitter

👉 Don’t forget to clap if you like the post