Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Save more on your purchases! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required.
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletter Hub
Free Learning
Arrow right icon
timer SALE ENDS IN
0 Days
:
00 Hours
:
00 Minutes
:
00 Seconds
Beginning Server-Side Application Development with Angular
Beginning Server-Side Application Development with Angular

Beginning Server-Side Application Development with Angular: Discover how to rapidly prototype SEO-friendly web applications with Angular Universal

eBook
€8.99 €10.99
Paperback
€12.99
Subscription
Free Trial
Renews at $19.99p/m

What do you get with Print?

Product feature icon Instant access to your digital copy whilst your Print order is Shipped
Product feature icon Paperback book shipped to your preferred address
Product feature icon Redeem a companion digital copy on all Print orders
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
OR
Modal Close icon
Payment Processing...
tick Completed

Shipping Address

Billing Address

Shipping Methods
Table of content icon View table of contents Preview book icon Preview Book

Beginning Server-Side Application Development with Angular

Chapter 1. Creating the Base Application

The Angular application we will build is a list of posts you regularly see in a social app such as Twitter. Each of these posts is posted by a user and we can click through to the user's profile to show all the posts made by the profile.

We will intentionally keep the application simple as the book is meant to focus on the technology rather than the functionality of the app. Although the app is simple, we will develop it using all the best practices of Angular development.

Web applications built with Angular can be optimized for search engines (SEO). Building support for SEO in apps means that search engines can read and understand the pages, and that the pages have dynamic data that is specifically aimed at search engines (meta tags). This increases the visibility of your app, giving higher search rankings and more links, resulting in more revenues for you or your client. Angular provides built-in features that can be leveraged to ensure apps enjoy maximum visibility on the web.

Lesson Objectives


In this lesson, you will:

  • Install Angular CLI

  • Create an Angular application

  • Create the base UI of the application

  • Create the header and footer of our application

Server-Side and Client-Side Rendering


When we talk about server-side rendering of websites, we are generally referring to an application or website that uses a programming language that runs on a server. On this server, the web pages are created (rendered) and the output of that rendering (the HTML) is sent to the browser, where it can be displayed directly.

When we talk about client-side rendering, we are generally referring to an application or website that uses JavaScript running in the browser to display (render) the pages. There is often a single page that is downloaded, with a JavaScript file that builds up the actual page (hence the term single-page application).

Installing Angular CLI


Angular CLI is the officially supported tool for creating and developing Angular applications. It is an open source project that is maintained by the Angular team and is the recommended way to develop Angular applications.

Angular CLI offers the following functionality:

  • Create a new application

  • Run the application in development mode

  • Generate code using the best practices from the Angular team

  • Run unit tests and end-to-end tests

  • Create a production-ready build

One of the main benefits of using Angular CLI is that you don't need to configure any build tools. It's all abstracted away and available through one handy command: ng.

Throughout the book, we will be using the ng command for creating the app, generating the code, running the application in development mode, and creating builds.

Note

For more information about Angular CLI, refer to the project page on GitHub (https://github.com/angular/angular-cli)

To install Angular CLI on your machine, perform the following steps:

  1. Open your terminal.

  2. Run the following command:

    npm install –g @angular/cli@latest
  3. Once the installation is finished without any errors, make sure that the ng command works as expected by running the following command:

    ng --version
  4. Verify that the output is similar to the output shown here:

In this section, we have installed Angular CLI. We can start building our application!

Generating a New Application


Now that we have installed and configured Angular CLI, we can start generating our new application.

Running the ng new command will do the following:

  • Create a folder called angular-social

  • Create a new basic application inside this folder

  • Add a routing module (because the --routing flag is passed in)

  • Run npm install inside this folder to install the dependencies

  • Run git init to initialize a new Git repository

Creating a New Application

To create a new application, perform the following steps:

  1. Open your terminal and navigate to the directory where you want to work on your application:

    cd dev
  2. Once inside your workspace directory, invoke the ng command as follows:

    ng new angular-social --routing
  3. The output of this command will be similar to the following:

Let's have a look at the folders that are created after running this command:

  • src: This folder contains the source files for our application

  • src/app/: This folder contains the application files

  • src/assets/: This folder contains the static assets we can use in our application (such as images)

  • src/environments/: This folder contains the definition of the default environments of our application

  • e2e: This folder contains the end-to-end tests for our application

Serving the Application

To serve the application, perform the following steps:

  1. When the installation is finished, we can open our terminal and enter the working directory:

    cd angular-social
  2. Run the ng serve command to start the development server:

    ng serve

    The output of the command will be as follows:

Viewing Your Application

To view your application, perform the following steps:

  1. Open your browser and navigate to http://localhost:4200/.

  2. You should be greeted with a default page that says Welcome to app!:

In this section, we have created a basic application using Angular CLI and viewed the same in the browser.

Setting Defaults for Angular CLI


Angular CLI works great out of the box and the default setup delivers a nice configuration to work with. But in addition to having some sane defaults, it is also very configurable.

In this book, we will take the opportunity to configure our Angular CLI defaults so it behaves a little bit differently.

The things we are going to change all have to do with how we generate (or scaffold) our code.

When scaffolding components, the default Angular CLI settings will create the HTML template and style sheet in a separate file.

In order to keep all component content in one file, we will configure Angular CLI to generate inline templates and styles.

The advantage of keeping all the component content in one file is that you can work on templates, styles, and the actual component code in a single place without having to switch files.

Configuring Global Defaults

In your terminal, run the following commands to globally configure the defaults:

ng set defaults.component.inlineStyle true
ng set defaults.component.inlineTemplate true

When we run the git diff command, we see that these settings are stored in the .angular-cli.json file in our application:

In this section, we have configured Angular CLI to generate inline styles and templates.

Configuring Global Styles


The default generated Angular application does not have any styling.

Angular does not dictate anything in terms of style, so in your own projects, you can use any other style framework, such as Angular Material, Foundation, Semantic UI, or one of the many others. Alternatively, you can create your own styles from scratch to get a unique look and feel.

For this book, though, we will stick to Bootstrap 4 and Font Awesome as they're widely used and they provide a great style with a minimal amount of added code.

Linking to the Style Sheets in global styles.css

As discussed in the previous section, our application comes with a global style sheet, src/styles.css.

In this style sheet, we will use the @import command to link to Bootstrap and Font Awesome. This will instruct Angular to download the files and apply the style to your application globally.

Adding Bootstrap and Font Awesome

  1. Open the src/styles.css file in your editor.

  2. Add the following two lines at the end of the file:

    @import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css');
    @import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
  3. Refresh the app in the browser.

As you can see, the font of the application was updated to a sans-serif font as that's the Bootstrap default:

Showing an Icon on the Page

  1. Open the src/app.component.html file and replace the content with the following:

    <h1 class="text-center mt-5">
      <i class="fa fa-thumbs-up"></i>
    </h1>

When the app refreshes in your browser, you should see the thumbs up icon in the center of the page:

Note

For a list of all available icons, you can refer to the Font Awesome Cheatsheet (http://fontawesome.io/cheatsheet/).

For an overview of all available Bootstrap styles, you can refer to the Bootstrap 4 documentation (https://getbootstrap.com/docs/4.0/getting-started/introduction/).

In this section, we have set up Bootstrap and Font Awesome as the style frameworks for our app. This will enable us to have a different font style than what Angular CLI provides. We can now start creating our UI components.

Creating UI Modules and Components


One of the great things about working with Angular is that it promotes building your applications in a modular and componentized way.

In Angular, an NgModule (or simply Module) is a way to group your application into logical blocks of functionality.

A Module is a TypeScript class with the @NgModule decorator. In the decorator, we define how Angular compiles and runs the code inside the module.

In this lesson, we are going to build a module that groups together all the components we want to use in our user interface.

We will add a LayoutComponent that consists of our HeaderComponent and FooterComponent, and in-between those, we will define the space where our application code will be displayed using the RouterOutlet component:

Creating the UiModule

In this section, we will generate the UiModule using the ng command and import the UiModule in the AppModule.

Using the ng generate command, we can generate or scaffold out all sorts of code that can be used in our Angular application.

We will use the ng generate module command to generate our UiModule.

This command has one required parameter, which is the name. In our application, we will call this module ui:

  1. Open your terminal and navigate to the project directory.

  2. Run the following command from inside the project directory:

    $ ng generate module ui
       create src/app/ui/ui.module.ts (186 bytes)

As you can see from the output of the command, our UiModule is generated in the new folder src/app/ui:

When we take a look at this file, we can see what an empty Angular module looks like:

   import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';

    @NgModule({
      imports: [
        CommonModule
      ],
      declarations: []
    })
    export class UiModule { }

Importing Our UiModule

Now that our UiModule is created, we need to import it from our AppModule. That way, we can use the code inside the UiModule from other code that lives inside the AppModule:

  1. Open the project in your editor.

  2. Open the src/app/app.module.ts file.

  3. Add the import statement on top of the file:

    import { UiModule } from './ui/ui.module'
  4. Add a reference to UiModule in the imports array inside the NgModule decorator:

    @NgModule({
       ...
       imports: [
         // other imports
         UiModule
       ],
      ...
     })

Our UiModule is now created and imported in our AppModule, which makes it ready to use.

Let's go ahead and create our first component inside the UiModule, and make it display in our app!

Displaying the Current Route

When building our app, we will heavily lean on Angular's router to tie all of our modules and components together.

Because we will build all the functionality in modules, we will use our main AppComponent only to display the current route. To make this work, we will need to update the AppComponent template and make sure we define the router-outlet:

  1. Open the project in your editor.

  2. Open the src/app/app.component.html file.

  3. Remove all of the content and add the following HTML:

    <router-outlet></router-outlet>

After refreshing the app in our browser, we should see a blank page. This is because we don't have any routes set up and thus there is no way the Angular app knows what to display. Let's move to the next section to create our basic layout!

Creating the LayoutComponent

In this section, we will use ng generate to create the LayoutComponent inside the UiModule and add the LayoutComponent to the AppRoutingModule so it gets displayed.

The LayoutComponent is the main template of our application. Its function is to glue together the HeaderComponent and the FooterComponent and show the actual application pages in-between those two.

Now we will be using the ng generate command to create our LayoutComponent.

  1. Open your terminal and navigate to the project directory.

  2. Run the following command from inside the project directory:

    ng generate component ui/components/layout

When we look at the output, we see that our component was created in the new src/app/ui/components directory:

The last line of our output shows us that our UiModule was updated.

When we open our UiModule in our editor, we see that it added an import for our LayoutComponent and added it to the declarations array in the NgModule decorator.

The declarations array declares the existence of components in a module so Angular knows that they exist and can be used:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: []
})
export class UiModule { }

Adding a New Route

As described earlier in this section, we will use our LayoutComponent as the base for the whole application. It will display our header, footer, and an outlet to show our actual application screens.

We will leverage Angular's built-in routing mechanism to do this. We will do this by adding a new route to the routing array, and reference the LayoutComponent in this route's component:

  1. Open the src/app/app-routing.module.ts file.

  2. Add an import to the list of imports on the top of the file:

    import { LayoutComponent } from './ui/components/layout/layout.component'
  3. Inside the empty array that is assigned to the routes property, we add a new object literal.

  4. Add the path property and set its value to an empty string ''.

  5. Add the component property and set its value to the reference LayoutComponent that we just imported. The line of code that we add to our routes array is as follows:

    { path: '', component: LayoutComponent, children: [] },

For reference, the complete file should look like this:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LayoutComponent } from './ui/components/layout/layout.component'

const routes: Routes = [
  { path: '', component: LayoutComponent, children: [] },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

When our application refreshes, we should see the text layout works!:

Building Our Layout

Let's get rid of this default text and start building our actual layout:

  1. Open the src/app/ui/layout/layout.component.ts file.

  2. Get rid of the contents of the template property.

  3. Add the following contents to the empty template string:

    app-header placeholder
    <div class="container my-5">
       <router-outlet></router-outlet>
    </div>
    app-footer placeholder

When we save our file, we see that our browser outputs a blank page.

Looking in the Console tab from Chrome Developer Tools, we see that we have an error stating Template parse errors: 'router-outlet' is not a known element:

In order to make Angular aware of how to render the router-outlet, we need to import the RouterModule:

  1. Open the src/app/ui/ui.module.ts file.

  2. Add an import statement to the list of imports on the top of the file:

    import { RouterModule } from '@angular/router';
  3. Add a reference to the RouterModule inside the imports array in the NgModule decorator.

When we now save the file, we should see the placeholders for our header and footer, with some white space in-between and the router error is now gone from our console:

Now that that's done, let's add some content to the placeholders!

Creating the HeaderComponent

In this section, we will use ng generate to create the HeaderComponent inside the UiModule, reference the HeaderComponent from our LayoutComponent so it gets displayed, and implement the navigation bar with a dynamic title and items.

We will be using the ng generate command to create our HeaderComponent:

  1. Open your terminal and navigate to the project directory.

  2. Run the following command from inside the project directory:

    ng g c ui/components/header

When we look at the output, we see that our component was created in the new src/app/ui/header directory and that our UiModule was updated, just as we would expect after having done the same for our LayoutComponent:

Updating the LayoutComponent to Reference Our New HeaderComponent

Now, we will update the LayoutComponent so that it references our new HeaderComponent instead of our app-header placeholder:

  1. Open the src/app/ui/components/layout/layout.component.ts file.

  2. Find the app-header placeholder and replace it with the following tag:

    <app-header></app-header>

When we see our application refresh in our browser, we see that we now have the string header works! instead of the placeholder:

We can now start implementing our actual header so that our pages finally start to look like an app!

Creating the Actual Header

Now we will create the actual header. We will define three class properties, a string property for the application logo and title, and an array of objects that represent the links we want to display in our header.

In the template, we will create a Bootstrap navbar consisting of a nav element with some styles, a link with our logo and title, and the actual navigation links.

Note

More information on how to use the navbar can be found here: https://getbootstrap.com/docs/4.0/components/navbar/

  1. Download the file from https://angular.io/assets/images/logos/angular/angular.svg and store it as src/assets/logo.svg.

  2. Open the src/app/ui/components/header/header.component.ts file.

  3. Inside the component class, we add three new properties:

    public logo = 'assets/logo.svg';
    public title = 'Angular Social';
    public items = [{ label: 'Posts', url: '/posts'}];
  4. Replace the contents of the template property with the following markup:

    <nav class="navbar navbar-expand navbar-dark bg-dark">
       <a class="navbar-brand" routerLink="/">
         <img [src]="logo" width="30" height="30" alt="">
    
       </a>
       <div class="collapse navbar-collapse">
         <ul class="navbar-nav">
           <li class="nav-item" *ngFor="let item of items" routerLinkActive="active">
             <a class="nav-link" [routerLink]="item.url">{{item.label}}</a>
           </li>
         </ul>
       </div>
    </nav>

When we save this file and check in our browser, we finally see the first real part of the application being displayed. Things will move quickly from now on:

Let's apply the knowledge we have gained in this section to build the FooterComponent.

Creating the FooterComponent

In this section, we will use ng generate to create the FooterComponent inside the UiModule, reference the FooterComponent from our LayoutComponent so it gets displayed, and implement the footer and add a small copyright message.

We will be using the ng generate command to create our FooterComponent:

  1. Open your terminal and navigate to the project directory.

  2. Run the following command from inside the project directory:

    $ ng g c ui/components/footer

When we look at the output, we see that our component got created in the new src/app/ui/footer directory and that our UiModule was updated, similar to what happened in the previous sections:

Updating the LayoutComponent to Reference Our New FooterComponent

We will update the LayoutComponent so that it references our new FooterComponent instead of our app-footer placeholder:

  1. Open the src/app/ui/components/layout/layout.component.ts file.

  2. Find the app-footer placeholder and replace it with the following tag:

    <app-footer></app-footer>

Just like with our header, we see after refreshing our application that we now have the string footer works! instead of the placeholder:

The last step is to implement the footer and our base layout is done!

Creating the Actual Footer

Now we will create the actual footer. We will define two class properties, a string property for the name of the developer, and the year.

In the template, we will create another Bootstrap navbar consisting of a nav element with some styles and the copyright message that uses both string properties we defined in our component class:

  1. Open the src/app/ui/components/footer/footer.component.ts file.

  2. Inside the component class, add the following property. Don't forget to update the two placeholders with the right data:

      public developer = 'YOUR_NAME_PLACEHOLDER';
      public year = 'YEAR_PLACEHOLDER';
  3. Get rid of the contents of the template property.

  4. Replace the contents of the template property with the following markup:

    <nav class="navbar fixed-bottom navbar-expand navbar-dark bg-dark">
       <div class="navbar-text m-auto">
          {{developer}} <i class="fa fa-copyright"></i> {{year}}
       </div>
    </nav>

When we save this file and check in our browser, we finally see that the footer is being rendered:

We are done with our layout! In this section, we've built our header and footer components. We've also built our layout component and created a UiModule. Let's get to building our actual application logic.

Summary


In this lesson, we installed Angular CLI and created the Angular application. We set a few default settings and configured our global styles with Bootstrap and Font Awesome. We then created the basic UI and layout of our app. Finally, we implemented a header and a footer in our app.

In the next lesson, we will create the application module and components.

Left arrow icon Right arrow icon

Key benefits

  • Rapidly build an application that's optimized for search performance
  • Develop service workers to make your application truly progressive
  • Automatically update metadata and load in content from external APIs

Description

Equip yourself with the skills required to create modern, progressive web applications that load quickly and efficiently. This fast-paced guide to server-side Angular leads you through an example application that uses Angular Universal to render application pages on the server, rather than the client. You'll learn how to serve your users views that load instantly, while reaping all the SEO benefits of improved page indexing. With differences of just 200 milliseconds in performance having a measurable impact on your users, it's more important than ever to get server-side right.

Who is this book for?

This book is ideal for experienced front-end developers who are looking to quickly work through an intelligent example that demonstrates all the key features of server-side development with Angular. You'll need some prior exposure to Angular, as we skim over the basics and get straight to work.

What you will learn

  • Use the official tools provided by Angular to build an SEO-friendly application
  • Create a dynamic web application that maps to current Angular best practices
  • Manage your Angular applications with Angular CLI
  • Implement server-side rendering for your future web application projects
  • Configure service workers to automatically update your application in the background
Estimated delivery fee Deliver to Denmark

Premium delivery 7 - 10 business days

€17.95
(Includes tracking information)

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : Apr 30, 2018
Length: 110 pages
Edition : 1st
Language : English
ISBN-13 : 9781789342161
Vendor :
Google
Languages :
Tools :

What do you get with Print?

Product feature icon Instant access to your digital copy whilst your Print order is Shipped
Product feature icon Paperback book shipped to your preferred address
Product feature icon Redeem a companion digital copy on all Print orders
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
OR
Modal Close icon
Payment Processing...
tick Completed

Shipping Address

Billing Address

Shipping Methods
Estimated delivery fee Deliver to Denmark

Premium delivery 7 - 10 business days

€17.95
(Includes tracking information)

Product Details

Publication date : Apr 30, 2018
Length: 110 pages
Edition : 1st
Language : English
ISBN-13 : 9781789342161
Vendor :
Google
Languages :
Tools :

Packt Subscriptions

See our plans and pricing
Modal Close icon
$19.99 billed monthly
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Simple pricing, no contract
$199.99 billed annually
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just €5 each
Feature tick icon Exclusive print discounts
$279.99 billed in 18 months
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just €5 each
Feature tick icon Exclusive print discounts

Frequently bought together


Stars icon
Total €61.97 €70.97 €9.00 saved
Beginning Server-Side Application Development with Angular
€12.99
Angular 6 for Enterprise-Ready Web Applications
€41.99
Mastering Angular Components
€32.99
Total €61.97€70.97 €9.00 saved Stars icon

Table of Contents

4 Chapters
Creating the Base Application Chevron down icon Chevron up icon
Creating the Application Module and Components Chevron down icon Chevron up icon
Server-Side Rendering Chevron down icon Chevron up icon
Service Workers Chevron down icon Chevron up icon
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

What is the digital copy I get with my Print order? Chevron down icon Chevron up icon

When you buy any Print edition of our Books, you can redeem (for free) the eBook edition of the Print Book you’ve purchased. This gives you instant access to your book when you make an order via PDF, EPUB or our online Reader experience.

What is the delivery time and cost of print book? Chevron down icon Chevron up icon

Shipping Details

USA:

'

Economy: Delivery to most addresses in the US within 10-15 business days

Premium: Trackable Delivery to most addresses in the US within 3-8 business days

UK:

Economy: Delivery to most addresses in the U.K. within 7-9 business days.
Shipments are not trackable

Premium: Trackable delivery to most addresses in the U.K. within 3-4 business days!
Add one extra business day for deliveries to Northern Ireland and Scottish Highlands and islands

EU:

Premium: Trackable delivery to most EU destinations within 4-9 business days.

Australia:

Economy: Can deliver to P. O. Boxes and private residences.
Trackable service with delivery to addresses in Australia only.
Delivery time ranges from 7-9 business days for VIC and 8-10 business days for Interstate metro
Delivery time is up to 15 business days for remote areas of WA, NT & QLD.

Premium: Delivery to addresses in Australia only
Trackable delivery to most P. O. Boxes and private residences in Australia within 4-5 days based on the distance to a destination following dispatch.

India:

Premium: Delivery to most Indian addresses within 5-6 business days

Rest of the World:

Premium: Countries in the American continent: Trackable delivery to most countries within 4-7 business days

Asia:

Premium: Delivery to most Asian addresses within 5-9 business days

Disclaimer:
All orders received before 5 PM U.K time would start printing from the next business day. So the estimated delivery times start from the next day as well. Orders received after 5 PM U.K time (in our internal systems) on a business day or anytime on the weekend will begin printing the second to next business day. For example, an order placed at 11 AM today will begin printing tomorrow, whereas an order placed at 9 PM tonight will begin printing the day after tomorrow.


Unfortunately, due to several restrictions, we are unable to ship to the following countries:

  1. Afghanistan
  2. American Samoa
  3. Belarus
  4. Brunei Darussalam
  5. Central African Republic
  6. The Democratic Republic of Congo
  7. Eritrea
  8. Guinea-bissau
  9. Iran
  10. Lebanon
  11. Libiya Arab Jamahriya
  12. Somalia
  13. Sudan
  14. Russian Federation
  15. Syrian Arab Republic
  16. Ukraine
  17. Venezuela
What is custom duty/charge? Chevron down icon Chevron up icon

Customs duty are charges levied on goods when they cross international borders. It is a tax that is imposed on imported goods. These duties are charged by special authorities and bodies created by local governments and are meant to protect local industries, economies, and businesses.

Do I have to pay customs charges for the print book order? Chevron down icon Chevron up icon

The orders shipped to the countries that are listed under EU27 will not bear custom charges. They are paid by Packt as part of the order.

List of EU27 countries: www.gov.uk/eu-eea:

A custom duty or localized taxes may be applicable on the shipment and would be charged by the recipient country outside of the EU27 which should be paid by the customer and these duties are not included in the shipping charges been charged on the order.

How do I know my custom duty charges? Chevron down icon Chevron up icon

The amount of duty payable varies greatly depending on the imported goods, the country of origin and several other factors like the total invoice amount or dimensions like weight, and other such criteria applicable in your country.

For example:

  • If you live in Mexico, and the declared value of your ordered items is over $ 50, for you to receive a package, you will have to pay additional import tax of 19% which will be $ 9.50 to the courier service.
  • Whereas if you live in Turkey, and the declared value of your ordered items is over € 22, for you to receive a package, you will have to pay additional import tax of 18% which will be € 3.96 to the courier service.
How can I cancel my order? Chevron down icon Chevron up icon

Cancellation Policy for Published Printed Books:

You can cancel any order within 1 hour of placing the order. Simply contact customercare@packt.com with your order details or payment transaction id. If your order has already started the shipment process, we will do our best to stop it. However, if it is already on the way to you then when you receive it, you can contact us at customercare@packt.com using the returns and refund process.

Please understand that Packt Publishing cannot provide refunds or cancel any order except for the cases described in our Return Policy (i.e. Packt Publishing agrees to replace your printed book because it arrives damaged or material defect in book), Packt Publishing will not accept returns.

What is your returns and refunds policy? Chevron down icon Chevron up icon

Return Policy:

We want you to be happy with your purchase from Packtpub.com. We will not hassle you with returning print books to us. If the print book you receive from us is incorrect, damaged, doesn't work or is unacceptably late, please contact Customer Relations Team on customercare@packt.com with the order number and issue details as explained below:

  1. If you ordered (eBook, Video or Print Book) incorrectly or accidentally, please contact Customer Relations Team on customercare@packt.com within one hour of placing the order and we will replace/refund you the item cost.
  2. Sadly, if your eBook or Video file is faulty or a fault occurs during the eBook or Video being made available to you, i.e. during download then you should contact Customer Relations Team within 14 days of purchase on customercare@packt.com who will be able to resolve this issue for you.
  3. You will have a choice of replacement or refund of the problem items.(damaged, defective or incorrect)
  4. Once Customer Care Team confirms that you will be refunded, you should receive the refund within 10 to 12 working days.
  5. If you are only requesting a refund of one book from a multiple order, then we will refund you the appropriate single item.
  6. Where the items were shipped under a free shipping offer, there will be no shipping costs to refund.

On the off chance your printed book arrives damaged, with book material defect, contact our Customer Relation Team on customercare@packt.com within 14 days of receipt of the book with appropriate evidence of damage and we will work with you to secure a replacement copy, if necessary. Please note that each printed book you order from us is individually made by Packt's professional book-printing partner which is on a print-on-demand basis.

What tax is charged? Chevron down icon Chevron up icon

Currently, no tax is charged on the purchase of any print book (subject to change based on the laws and regulations). A localized VAT fee is charged only to our European and UK customers on eBooks, Video and subscriptions that they buy. GST is charged to Indian customers for eBooks and video purchases.

What payment methods can I use? Chevron down icon Chevron up icon

You can pay with the following card types:

  1. Visa Debit
  2. Visa Credit
  3. MasterCard
  4. PayPal
What is the delivery time and cost of print books? Chevron down icon Chevron up icon

Shipping Details

USA:

'

Economy: Delivery to most addresses in the US within 10-15 business days

Premium: Trackable Delivery to most addresses in the US within 3-8 business days

UK:

Economy: Delivery to most addresses in the U.K. within 7-9 business days.
Shipments are not trackable

Premium: Trackable delivery to most addresses in the U.K. within 3-4 business days!
Add one extra business day for deliveries to Northern Ireland and Scottish Highlands and islands

EU:

Premium: Trackable delivery to most EU destinations within 4-9 business days.

Australia:

Economy: Can deliver to P. O. Boxes and private residences.
Trackable service with delivery to addresses in Australia only.
Delivery time ranges from 7-9 business days for VIC and 8-10 business days for Interstate metro
Delivery time is up to 15 business days for remote areas of WA, NT & QLD.

Premium: Delivery to addresses in Australia only
Trackable delivery to most P. O. Boxes and private residences in Australia within 4-5 days based on the distance to a destination following dispatch.

India:

Premium: Delivery to most Indian addresses within 5-6 business days

Rest of the World:

Premium: Countries in the American continent: Trackable delivery to most countries within 4-7 business days

Asia:

Premium: Delivery to most Asian addresses within 5-9 business days

Disclaimer:
All orders received before 5 PM U.K time would start printing from the next business day. So the estimated delivery times start from the next day as well. Orders received after 5 PM U.K time (in our internal systems) on a business day or anytime on the weekend will begin printing the second to next business day. For example, an order placed at 11 AM today will begin printing tomorrow, whereas an order placed at 9 PM tonight will begin printing the day after tomorrow.


Unfortunately, due to several restrictions, we are unable to ship to the following countries:

  1. Afghanistan
  2. American Samoa
  3. Belarus
  4. Brunei Darussalam
  5. Central African Republic
  6. The Democratic Republic of Congo
  7. Eritrea
  8. Guinea-bissau
  9. Iran
  10. Lebanon
  11. Libiya Arab Jamahriya
  12. Somalia
  13. Sudan
  14. Russian Federation
  15. Syrian Arab Republic
  16. Ukraine
  17. Venezuela