Host a website Amazon S3

Hey Guys ,

This blog is on how to host a static website using Amazon S3 .

1. Login to AWS free tier .

2. goto Amazon S3 .

3. Create a bucket .

4. Add the files of your website

5. Go to Permissions Tab and   edit Block Public Access . Switch off Block all public access .

6 . Goto static Website hosting and Enable it .

7. Go to Bucket policy and change it to public .

Attempted import error: does not contain a default export

Hi Guys ,

This blog is about the error
Attempted import error: does not contain a default export .

The full error log is as follows :

Attempted import error: './header/Top.js' does not contain a default export (imported as 'Top').

If you are new to react development you may face this error .

The fix is simple , in the component file you need to add the export statement like the one below .

export default Top;

Thanks !

'React' is not defined no-undef

Hi Guys ,

This blog is about the error
'React' is not defined no-undef .

The full error log is as follows :

./src/header/Top.js
  Line 3:26:  'React' is not defined                   no-undef
  Line 9:14:  'React' must be in scope when using JSX  react/react-in-jsx-scope

Search for the keywords to learn more about each error.

This is an error we face when we create a new component in react js .

The fix is quite simple .

check if you have missed the import for react , if it is missing add the following line at the top of your file .

import React from 'react';

Thanks !

scss vs sass

Hey Guys !

This is a blog on the differences between SCSS and SASS.

I keep updating this blog , so let me know your thoughts in the comments section .

Whenever I used to work on CSS I always find something missing , for example I was not able to reuse an existing class and I had to create a new class even though almost all the properties were same . Apart from inheritance there where other missing features like usage of variables . Sass provides the missing features in css .

Lets discuss on the first feature , the variables .

In sass I can use a variable name $bgcolor,

/* Use the variables */

body {

    background-color: $bgcolor;

   

  }

But since I have not defined it I will get an error

 ERROR in ./src/app/app.component.scss

Module build failed (from ./node_modules/sass-loader/lib/loader.js):

    background-color: $bgcolor;

                     ^

      Undefined variable.

  ╷

3 │     background-color: $bgcolor;

  │                       ^^^^^^^^

  ╵

  stdin 3:23  root stylesheet

So I need to define a variable like this ,

$bgcolor : lightblue;

     
Make sure you add $ symbol in the beginning of the variable name otherwise you will get an error message as

bgcolor : lightblue; ^ Expected "{". ╷ 3 │ bgcolor : lightblue; │ ^ ╵

     



Thanks !.

error TS2307: Cannot find module '@angular/fire'.

Hi Guys ,

This blog is about the error :

error TS2307: Cannot find module '@angular/fire'.





ErrorLog :

ERROR in src/app/app.module.ts(5,35): error TS2307: Cannot find module '@angular/fire'.
src/app/app.module.ts(6,40): error TS2307: Cannot find module '@angular/fire/firestore'.
src/app/app.module.ts(7,39): error TS2307: Cannot find module '@angular/fire/auth'.
src/app/app.module.ts(23,47): error TS2339: Property 'firebase' does not exist on type '{ production: boolean; }'.
src/app/auth.service.ts(2,33): error TS2307: Cannot find module '@angular/fire/auth'.
src/app/auth.service.ts(3,27): error TS2307: Cannot find module 'firebase/app'.

Thanks !

cannot find module '@angular/animations'.

Hi Guys ,

This blog is about the error
cannot find module '@angular/animations'.

You may get this error while using angular animation .

Below are the few steps which will help you fix this error .

Check if the angular animation module is  present in your application .

If angular animation is not present install angular animation using the following command .
npm install @angular/animations

After that import BrowserAnimationsModule in appmodule.ts file .

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

Hope this helps in resolving the issue .

Load Dynamic Html in Div using Angular

Hi Guys ,

In this blog we will discuss on how to load a dynamic HTML into a div .
Lets assume the source of the HTML is a service .
In angular , you can perform this using a user defined directive and ng-template .

Let us first create a custom directive .

import { Directive , ElementRef,Input} from '@angular/core';

@Directive({

  selector: '[appContent]'

})

export class ContentDirective {

  @Input()  innerHtml ;

  constructor(private el: ElementRef) { }

  

  ngOnInit() {

    this.el.nativeElement.innerHTML = this.innerHtml;

    console.log(this.innerHtml);

   }

   ngAfterContentInit(){

    console.log(this.innerHtml);

   }

   ngAfterViewInit(){

    console.log(this.innerHtml);

   }

}

Now , let us create a service to fetch the response HTML .

import { Injectable } from "@angular/core";

import { Headers, Http, Response } from '@angular/http';

@Injectable({

    providedIn: 'root'

  })

export class AppService {

    constructor(private http: Http ) { }

    loadContent(){

        return this.http

        .get('http://localhost:8990/loadFile/b5510b8d-c766-48bd-808d-54c2e6e6d1c2');

    }

}

The next step is to use the custom directive in the component file using ng-template .

<app-header></app-header>

<ng-template [ngIf]="loadcontent" >

    <div  appContent [innerHtml]="content" >

    </div>

<div>

    Footer

</div>

</ng-template>

Hope this helps .Thanks for reading !