All about Package.json ?

Usually, when we are going to start development with any Javascript Framework related project, Package.json is the first step to know all about. And today we will know all about Package.json

What is Package.json?

It's a plain JSON file
Kind of manifest for the project
Help others to easily use, manage and install dependencies
List packages on which project depends on
Packages are in ranges or the specific version
File must contain packages in "name" and "version" format
Used to give information to npm that allows it to identify the project
And help to handle the project's dependencies
Also contain other metadata such as license, distribution, configuration data
Also recommended to put DevDependencies, which makes dev life smooth by fast development

Package.json contains?

All the information are listed in ascending order as below:

name
 sets the application/package name
version
indicates the current version
description 
is a brief description of the app/package
main
set the entry point for the application
private
if set to true prevents the app/package to be accidentally published on npm
scripts
defines a set of node scripts you can run
dependencies
 sets a list of npm packages installed as dependencies
devDependencies
 sets a list of npm packages installed as development dependencies
engines
sets which versions of Node this package/app works on
browserslist
is used to tell which browsers (and their versions) you want to support


Role of package.json?

Whenever user run "npm install" command on root level, all the dependencies related to project which is listed in Package.json will be installed.
and put all dependencies to "node_modules" directory

SXA Page Design Creation : Tutorial 7

Till the previous post, we are done with Implementation of Partial Design required for our site, now will add the partial designs to Page Design.

But before implmentation, let's discuss Page Design

What is Page Design?

"Page design is used to group partial designs, it's kind of layout - where we add multiple partial designs and apply this page design to the page."

Flow:

In descending order, the list of components is used to create the partial design and the list of partial designs are used to create page design.

• Page Design

• List of Partial Designs

• Partial Design

• List of Components

When to use?

"When we wanted to reuse the list of components together so we add them in partial design, and when we need to reuse more than one partial designs together then will add them in Page design."

Now let's start the creation of Page Design for our site, so first create page design as defaultPageDesign by going at path "/Sitecore/content/demosite1/mydemosite/Presentation/Page Designs"

and add partial design as PartialHeader and PartialFooter to the Page Design, now save and come to the Home page and select page design to this page.

and apply this change to the Home Page

 now open it as preview mode

Now I wanted to apply this page design changes on all the pages as default, for that let's look into Home's Standard Value

and if you see page design changes is getting applied from Page template's standard value

so here I'm applying page design changes to the Page template's standard value

Now, this changes are applied to all the existing pages and new page when we will create in future.


Till now we are done with page design creation and their usage.

In the next post, will add rendering components to the pages as per our need in the body (main) section...