Dot nets commands for VS Code

 dotnet version 

dotnet --info  

dotnet -h         

dotnet new  

mkdir Reactivities

dotnet new sln   

dotnet new webapi -n API

dotnet new classlib -n Application

dotnet new classlib -n Domain

dotnet new classlib -n Persistence

dotnet sln

dotnet sln add API/API.csproj

dotnet sln add Application

dotnet sln add Persistence

dotnet sln add Domain

dotnet sln list

dotnet add reference ../Application

cd Application

dotnet add reference ../Persistence

cd Persistence

dotnet add reference ../Domain

dotnet run

dotnet tool install --global dotnet-ef --version 6.0.1

dotnet tool list --global

dotnet ef -h

dotnet ef migrations add InitialCreate -p Persistence -s API/

dotnet ef migrations add InitialCreate -p Persistence -s API

dotnet ef database -h

dotnet new gitignore

dotnet build

dotnet run watch

dotnet ef migrations add IdentityAdded -p Persistence -s API

dotnet ef migrations add ActivityAttendee -p Persistence -s API

dotnet ef migrations remove -p Persistence -s API

dotnet new classlib -n Infrastructure

dotnet sln add Infrastructure

cd Infrastructure

dotnet add reference ../Application

cd..

cd API

dotnet add reference ../Infrastructure

cd..

dotnet restore

Convert Json to SQL

 I needed to convert some json data into sql in a short cut and found these following resources:

https://jsonutils.com/

https://dbdiagram.io/

Learning Path for PowerApps Portal

 Liquid Objects:

https://docs.microsoft.com/en-us/powerapps/maker/portals/liquid/liquid-objects

Portal's Pros and Cons:

http://shaikhd365.blogspot.com/2018/08/what-is-dynamic-crm-web-portal.html

Web API in Power Apps Portals:

https://www.ariclevin.com/Home/Post/web-api-powerapps-portals

https://docs.microsoft.com/en-us/powerapps/maker/portals/web-api-perform-operations

Java Environment Setup

 Java's environment setup:

1. Install Amazon Corretto

https://aws.amazon.com/corretto/

2. Install IntelliJ IDEA

https://www.jetbrains.com/idea/

Learning Path Dynamics 365 and Power Platform

https://docs.microsoft.com/en-us/learn/modules/becoming-solution-architect/

https://docs.microsoft.com/en-us/learn/modules/intro-model-driven-apps-common-data-service/

https://docs.microsoft.com/en-us/learn/browse/?products=power-platform&skip=30

Some Useful Resources to Create an Angular or Angular 9 Project

https://codecraft.tv/courses/angular/http/http-with-observables/

https://www.techiediaries.com/angular/angular-9-8-tutorial-by-example-rest-crud-apis-http-get-requests-with-httpclient/

https://itnext.io/choosing-the-right-file-structure-for-angular-in-2020-and-beyond-a53a71f7eb05

https://www.techiediaries.com/angular-mock-backend/

https://www.npmjs.com/package/ol

https://stackblitz.com/edit/angular-bing-maps?file=src%2Fapp%2Fapp.component.ts

https://www.tektutorialshub.com/angular/angular-routing-between-modules/

https://angular.io/guide/feature-modules

https://www.techiediaries.com/angular/angular-9-elements-web-components/

https://www.techiediaries.com/angular/styling-angular-9-8-7-example-with-bootstrap-4-navbar-tables-forms-and-cards/

https://www.djamware.com/post/5e435e84a8d0ef4300ffc5f6/angular-9-tutorial-learn-to-build-a-crud-angular-app-quickly

https://www.djamware.com/post/5e435e84a8d0ef4300ffc5f6/angular-9-tutorial-learn-to-build-a-crud-angular-app-quickly

Some Resources to Create PowerApps Custom Component

Install PowerApps Cli

https://docs.microsoft.com/en-us/powerapps/developer/data-platform/powerapps-cli

Create and build a code component:

https://carldesouza.com/creating-a-custom-component-using-the-powerapps-component-framework/

Package a code component:

https://docs.microsoft.com/en-us/powerapps/developer/component-framework/import-custom-controls

Publish to production:

https://docs.microsoft.com/en-us/powerapps/developer/component-framework/issues-and-workarounds

Add code component into portal app:

https://www.inogic.com/blog/2021/09/use-of-code-components-in-power-apps-portal/

Extra:

PCF ReactJs Implementation Samples:

https://blog.thenetw.org/2019/06/06/getting-react-and-office-ui-fabric-work-with-powerapps-component-framework/

https://blog.dynamicscode.net/2019/06/26/react-extended-boundary-of-powerapps-component-framework/

How to add tools for unit testing in react js project ?

Below are the packages and command which need to be installed for unit testing in reactjs app.

yarn add jest enzyme react-test-renderer enzyme-adapter-react-16

I have used several packages which are:

Jest is a delightful JavaScript Testing Framework with a focus on simplicity.

Enzyme is a JavaScript Testing utility for React that makes it easier to test React Components' output.

React renderer that can be used to render React components to pure JavaScript objects, without depending on the DOM or a native mobile environment.

Enzyme adapter has peer dependencies on react and react-dom.

Cross-Origin Resource Sharing in Ruby on Rails Application

While working in Ruby on Rails application I faced a problem with Cross-Origin Resource Sharing. Here is the configuration below how to sort out this problem:

Rack::Cors provides support for Cross-Origin Resource Sharing

Steps to enable rackcors :

1.add gem to your Gemfile:

gem 'rack-cors'

2.Add below code to config/application.rb

# if you are using Rails 3/4

config.middleware.insert_before 0, "Rack::Cors" do

  allow do

    origins '*'

    resource '*', :headers => :any, :methods => :any

  end

end

# if you are using Rails 5

config.middleware.insert_before 0, Rack::Cors do

  allow do

    origins '*'

    resource '*', headers: :any, methods: :any

  end

end

Ruby on Rails Basic Commands

To create app:

rails new your_app

To start server:

rails s or rails server

To remove model:

bundle exec rake db:rollback 

rails destroy model <model_name>

To clear db:

rails db:purge
rails db:migrate

rails db:seed

Or all together.

rails db:purge db:migrate db:seed

ReactJs Component Life Cycle - Creation/Update

Creation:

constructor() // Call super(props), Do: Set up State, Don't: Cause Side-Effects

getDerivedStateFromProps() // Do: Sync state, Don't: Cause Side-Effects

render() // Prepare & Structure JSX Code

Render Child Components //

componentDidMount() // Do: Cause Side-Effects, Don't: Update State (triggers re-render)

Update:

getDerivedStateFromProps(props, state) // Do: Sync state to props, Don't: Cause Side-Effects

shouldComponentUpdate(nextProps, nextState) // Do: Decide whether to continue or not, Don't: Cause side-effects

render() // Prepare & Structure JSX Code

Render Child Components //

getSnapshotBeforeUpdate(prevProps, prevState) // Do: Last minute DOM ops, Dont: Cause side-effects

componentDidUpdate() // Do: Cause Side-Effects, Don't: Update State (triggers re-render)

How to work with fake REST API?

Sometimes it is necessary to work with fake REST API for practice projects. To achieve such necessity we can implement JSON Server as follows:

npm install --save json-server

the above command is to install json-server package on nodejs project. Then next we can create a json file name db.json and can add json data as follows:

{

    "users": [

        {"id": "23", "firstName": "Bill", "age": 20},

        {"id": "44", "firstName": "Samantha", "age": 30}

    ]

}

Now we need to add script inside the package.json file with this text "json:server": "json-server --watch db.json" and full scripts as follows:

"scripts": {

    "test": "echo \"Error: no test specified\" && exit 1",

    "json:server": "json-server --watch db.json"

  },

To run json server we can execute the command as follows:

npm run json:server

We can now access the db.json file's contents using the server url http://localhost:3000/users. 

To know more: https://github.com/typicode/json-server

How To Setup GraphQL With NodeJs

We know about RESTFul API which has some complexity in different cases, for example nested http request like domain.com/api/user/frinds/positions/companies and also mutiple http requests concurrently which make the server slow down. And of-course chunk of information instead of full model.

To overcome such problems, GraphQL comes which is a query language for API and querying data as runtime.

To setup GraphQL with NodeJs following steps need to be followed:

npm init 

the above command is to initiate NodeJs environment.

npm install --save express express-graphql graphql lodash

through the above command we will install some dependency packages like express for NodeJs server express-graphql the middleware or bridge layer between express and graphql and lodash is for some utility features.

After installing dependency packages above we need to create express server by creating a file named server.js and add code as follows:

const express = require('express');
const expressGraphQL = require('express-graphql');

const app = express();

app.use('/graphql', expressGraphQL({
    graphiql: true
}));

app.listen(4000, () => {
    console.log('Listening');
});

in the above code we have created express nodejs http server to listen the port number 4000 and then bound graphql middleware with expressjs.

Configuring Webpack for Development Purpose

In my earlier post I have discussed about the installation of webpack and webpack-dev-server for a project. In this post I will discuss how to start/run webpack dev server configuring with webpack. To do so, first of all we need to add a command in scripts of package.json file as follows:

"start": "webpack-dev-server"

Make sure “webpack-dev-server” is the package name installed under devDependencies. And the full scripts will be looked like below:

"scripts": {

    "test": "echo \"Error: no test specified\" && exit 1",

    "start": "webpack-dev-server"

  },

When we run npm start command the “webpack-dev-server” will be executed but it will seek a webpack config file which need to be created in the project root folder and the name should be webpack.config.js. We will add some configuration settings in this file as follows:

const path = require('path');

const autoprefixer = require('autoprefixer');

const htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

    devtool: 'cheap-module-eval-source-map',

    entry: './src/index.js',

    output: {

        path: path.resolve(__dirname, 'dist'),

        filename: 'bundle.js',

        chunkFilename: '[id].js',

        publicPath: ''

    },

    resolve: {

        extensions: ['.js', '.jsx']

    },

    module: {

        rules: [

            {

                test: /\.js$/,

                loader: 'babel-loader',

                exclude: /node_modules/

            },

            {

                test: /\.css$/,

                exclude: /node_modules/,

                use: [

                    { loader: 'style-loader' },

                    {

                        loader: 'css-loader',

                        options: {

                            importLoaders: 1,

                            modules: true,

                            localIdentName: '[name]__[local]__[hash:base64:5]'

                        }

                     },

                     {

                         loader: 'postcss-loader',

                         options: {

                             ident: 'postcss',

                             plugins: () => [

                                 autoprefixer({

                                     browsers: [

                                        "> 1%",

                                        "Last 2 versions"

                                     ]

                                 })

                             ]

                         }

                     }

                ]

            },

            {

                test: /\.(png|jpe?g|gif)$/,

                loader: 'url-loader?limit=8000&name=images/[name].[ext]'

            }

        ]

    },

    plugins: [

        new htmlWebpackPlugin({

            template: __dirname + '/src/index.html',

            filename: 'index.html',

            inject: 'body'

        })

    ]

};

In the above configuration code “devtool” is used to generate source map. The “entry” option is used to set entry point from where the webpack should start. And “output” option is used to set output location and filename of “bundle.js” that is the compressed version of all js into a single file. 

The “resolve” key is using for automatically finding extensions like .js or .jsx if we don’t add these extension with the file location while importing into the react code. 

The “module” key is used to add some rules on js/css or other files excluding certain unnecessary files to be optimized.

We also need to install some dependencies which are needed for this configuration as follows:

npm install –save-dev css-loader style-loader postcss-loader autoprefixer url-loader file-loader webpack-cli html-webpack-plugin rimraf

We also need to config babel which can found through this link below:

http://shahriat-hossain.blogspot.com/2018/08/configuring-babel-with-project.html

Configuring Babel with A Project

Babel is one of the architecture of modern javascript eco-system which works as a transpiler or converter to compile next generation javascript code to be worked with older browser. To work with babel we need to configure with the project. First of all we need to create babel config file in the project root folder as follows:

.babelrc

before going with the settings we need to install all the dependencies of babel using npm package as follows:

npm install --save-dev babel-loader babel-core babel-preset-react babel-preset-env babel-plugin-syntax-dynamic-import babel-preset-stage-2 babel-polyfill 

After installing babel dependencies we need to set those presets we have installed as npm package as follows:

{
    "presets": [
        ["env", {
            "targets": {
                "browsers": [
                    "> 1%",
                    "Last 2 versions"
                ]
            },
            "useBuiltIns": "entry"
        }],
        "stage-2",
        "react"
    ],
    "plugins": [
        "syntax-dynamic-import"
    ]
}

In the above settings we have added "env" preset to support target browsers from minimum to maximum version of browsers. Then we have added "react" preset to work with react jsx and next generation javascript code.

Installing ReactJs Production Dependencies

It is crucial to know production dependencies for ReactJs application. And here are some listed as follows:

react
react-dom
react-router-dom

We basically import React for JSX and Component for class or container based component from dependency 'react'.

ReactDOM to render entry point component into DOM from 'react-dom' and Link, BrowserRouter from 'react-router-dom'.

Since these are production dependencies so we can install using npm package adding white spaces as follows:

npm install --save react react-dom react-router-dom

How to set up webpack for a project?

In one of my project I needed to work with webpack and for this I need to install webpack and other dependency modules using npm package as follows:

npm init
npm install --save-dev webpack webpack-dev-server

in above two commands the first one is to set up node package configuration file the package.json to install node modules.

And the second line is to install depedency modules like webpack and webpack-dev-server which is the developement server to test the application locally.

Angular Style Guide

It is good practice to update yourself when needs. Recent I have been working in an angular project so it is important to update myself with the style guide of angular. I have found a tutorial from angular official site as follows:

https://angular.io/guide/styleguide

it may help me or you later :)

AngularJs Style Guide

Recent I have come up with my angularJs knowledge shaping up with a style guide. I have found a tutorial to make it possible as follows:

https://github.com/toddmotto/angularjs-styleguide

it may help me or someone later :)

FAILURE: Build failed with an exception. * What went wrong: Execution failed for task ':app:transformClassesWithDexBuilderForDebug'. > java.io.IOException: Could not delete path

I was working in a ReactNative project and while setting up it's environment was getting error as follows:

FAILURE: Build failed with an exception. * What went wrong: Execution failed for task ':app:transformClassesWithDexBuilderForDebug'. > java.io.IOException: Could not delete path

After removing the build directory from root directory -> android -> app 

it just did the trick :)