After entering to next-landing/src folder, You will find:

1. assets
2. components
3. reusecore
4. sections

Now, we will discuss about each and every folders and their tasks .

assets

In assets folder, you will find the data, images and theme folder. In data folder, you will find all of data uses in this template. You will also find the image folder, where all of the images are kept on the basis of the specific page. In theme folder, you will find all of themeing uses in this template.

components

Here all the Components we use in Appion.

reusecore

reusecore folder is most importantly use, you will find some basic components like Layout, Button, Counter, Navigation etc. We have written these components to make the developer's life easy. Here in details:
Accordion -> By this you can make any Accordion with your own style
Alert -> By this you can make any Alert with your own style
Button -> By this you can make any Button with your own style
Box -> By this you can align any area of block with your own style
Counter -> By this you can make any Counter with your own style
Layout -> Here in Layout all grid system are included
PageHeader -> By this you can make BreadCrumb with your own style
SectionTitle -> By this you can make any SectionTitle with your own style in template
SlickSlider -> By this you can make any slider with your own style in template
By using these basic components, you can write custom components according to your need.

sections

Here all the section include that’s we are used in our template like banner, about, features, news, wallet, Fund, FAQ etc etc for nextjs version.

In this folder , you will find the pages folder of next js and next configuration files. If you want to change something in next js folder , change here .

pages

As we have used next.js , we have a script to your package.json like this:

						{
						“scripts”: {
							“dev”: “next”,
							“build”: “next build”,
							“start”: “next start”
							}
						}
					

After that, the file-system is the main API. Every .js file becomes a route that gets automatically processed and rendered.
Please have a look at this link https://nextjs.org/docs/ for a quick look. You will understand the basic things so quickly.
As we have Three landing pages and three blog pages named index, classic, modern, blog-grid, blog-list, blog-single so we have seven js files named: index.js for Default Home Page.
home-two.js for Home-Two Page.
home-three.js for Home Three Page.
home-four.js for Home Four Page.
blog-grid.js for Blog Grid Page.
blog-list.js for Blog List Page.
blog-single for Blog-Single Page .

After entering to gatsby-landing/src folder, You will find:

1. assets
2. components
3. pages
4. reusecore
5. sections

Now, we will discuss about each and every folders and their tasks .

assets

In assets folder, you will find the data, images and theme folder. In data folder, you will find all of data uses in this template. You will also find the image folder, where all of the images are kept on the basis of the specific page. In theme folder, you will find all of themeing uses in this template.

components

Here all the Components we use in Appion.

pages

							"scripts": {
								"build": "gatsby build",
								"develop": "gatsby develop",
								"format": "prettier --write \"**/*.{js,jsx,json,md}\"",
								"dev": "npm run develop",
								"serve": "gatsby serve",
								"clean": "gatsby clean",
								"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
							}
						

Here all the Components we use in Appion.

reusecore

reusecore folder is most importantly use, you will find some basic components like Layout, Button, Counter, Navigation etc. We have written these components to make the developer's life easy. Here in details:
Accordion -> By this you can make any Accordion with your own style
Alert -> By this you can make any Alert with your own style
Button -> By this you can make any Button with your own style
Box -> By this you can align any area of block with your own style
Counter -> By this you can make any Counter with your own style
Layout -> Here in Layout all grid system are included
PageHeader -> By this you can make BreadCrumb with your own style
SectionTitle -> By this you can make any SectionTitle with your own style in template
SlickSlider -> By this you can make any slider with your own style in template
By using these basic components, you can write custom components according to your need.

sections

Here all the section include that’s we are used in our template like banner, about, features, news, wallet, Fund, FAQ etc etc for nextjs version.

Gatsby Cloud Deployment for Gatsbay

1. Upload your project into github/gitlab or bit bucket. Make this project private or public whatever you want.
2. Go to gatsby cloud
3. Choose i already have a site and get start
4. Fillout the all available options
5. Select your project repository from github/gitlab
6. You may skip Integrations
7. Then press create site

Vercel Deployment for Nextjs

Install the Vercel CLI

1. npm i -g vercel
2. vercel --prod

Firebase Deployment for Nextjs

1. Init firebasebase and create firbase project into project folder
2. Before we go next delete public/index.html
3. Open .babelrc file in editor and replace this code to module-resolver alias "alias": { "assets": "./src/client/assets", "components": "./src/client/components", "sections": "./src/client/sections", "reusecore": "./src/client/reusecore" }
4. Open firebase.json then replace with this code { "hosting": { "public": "public", "rewrites": [ { "source": "**/**", "function": "nextjs-server" } ] }, "functions": { "source": ".", "ignore": [ ".firebase/**", ".firebaserc", "firebase.json", "**/node_modules/**", "**/public/**" ] } }
5. install yarn add firebase-admin firebase-functions yarn add @babel/core @babel/cli @babel/preset-env cross-env rimraf -dev
6. Open package.json and this code "main": "dist/server/index.js", "engines": { "node": "10" }

   if you face engine related issues then run yarn config set ignore-engines true

7. Create two client and server folder into src/
8. select > pages, > assets, > components, > reusecore, > sections and move into client folder
9. add .babelrc, index.js into src/server/
10. open .babelrc in editor and add this code { "presets": [ [ "@babel/preset-env", { "targets": { "node": "10.15.3" } } ] ] }
11. open index.js in editor and add this code
    import * as admin from "firebase-admin"; import * as functions from "firebase-functions"; import next from "next"; admin.initializeApp(); const dev = process.env.NODE_ENV !== "production"; const app = next({ dev, // the absolute directory from the package.json file that initialises this module // IE: the absolute path from the root of the Cloud Function conf: { distDir: "dist/client" }, }); const handle = app.getRequestHandler(); const server = functions.https.onRequest((request, response) => { // log the page.js file or resource being requested console.log("File: " + request.originalUrl); return app.prepare().then(() => handle(request, response)); }); const nextjs = { server, };
12. Finally run firebase-build firebase-preserve firebase-serve yarn firebase-predeploy yarn firebase-deploy