Learn how to migrate the portfolio blueprint from the old version of Faust.js to the new Faust.js.

Update/Import New Dependencies

First, create an empty faust.config.js file. Ensure the package.json is updated to match the following scripts and dependencies:

{
  "name": "@faustjs/atlas-blueprint-portfolio",
  "version": "0.2.0",
  "private": true,
  "scripts": {
    "dev": "faust dev",
    "build": "faust build",
    "generate": "faust generatePossibleTypes",
    "start": "faust start",
    "lint": "faust lint",
    "clean": "rimraf .next node_modules",
    "wpe-build": "faust build",
    "format": "prettier --write './**/*.{js,jsx,md,mdx,css,scss}'",
    "format:check": "prettier --check './**/*.{js,jsx,md,mdx,css,scss}'"
  },
  "dependencies": {
    "@apollo/client": "3.7.0",
    "@faustwp/cli": "0.2.13",
    "@faustwp/core": "0.2.13",
    "classnames": "^2.3.1",
    "graphql": "^16.6.0",
    "next": "13.1.6",
    "normalize.css": "^8.0.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-icons": "4.6.0",
    "react-responsive-carousel": "3.2.23",
    "sharp": "^0.31.1",
    "use-debounce": "8.0.4"
  },
  "devDependencies": {
    "@wordpress/base-styles": "^4.7.0",
    "@wordpress/block-library": "^7.13.0",
    "dotenv-flow": "^3.2.0",
    "eslint": "8.9.0",
    "eslint-config-next": "12.0.10",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-import": "^2.25.4",
    "prettier": "^2.5.1",
    "rimraf": "^3.0.2",
    "sass": "^1.54.9"
  },
  "engines": {
    "node": ">=16.0.0",
    "npm": ">=8.0.0"
  }
}
Code language: JSON / JSON with Comments (json)

Delete and regenerate package-lock.json with npm run dev:

$ rm package-lock.json
$ npm run dev

Generate Possible Types

Create a possibleTypes.json file at the root level. add the following to the file:

$ npm run generate

// possibleTypes.json
{"Node":["Category","EnqueuedScript","EnqueuedStylesheet","ContentType","Taxonomy","User","Comment","MediaItem","Page","Post","PostFormat","Tag","Project","UserRole","Testimonial","Menu","MenuItem","Plugin","Theme","CommentAuthor"],"TermNode":["Category","PostFormat","Tag"],"UniformResourceIdentifiable":["Category","ContentType","User","MediaItem","Page","Post","PostFormat","Tag","Project","Testimonial"],"EnqueuedAsset":["EnqueuedScript","EnqueuedStylesheet"],"DatabaseIdentifier":["Category","User","Comment","MediaItem","Page","Post","PostFormat","Tag","Project","Testimonial","Menu","MenuItem"],"HierarchicalTermNode":["Category"],"MenuItemLinkable":["Category","Page","Post","Tag"],"ContentNode":["MediaItem","Page","Post","Project","Testimonial"],"Commenter":["User","CommentAuthor"],"NodeWithTemplate":["MediaItem","Page","Post","Project","Testimonial"],"ContentTemplate":["DefaultTemplate","Template_Blank","Template_SinglePostNoSeparators","Template_PageNoSeparators","Template_PageLargeHeader"],"NodeWithTitle":["MediaItem","Page","Post","Project","Testimonial"],"NodeWithAuthor":["MediaItem","Page","Post","Project","Testimonial"],"NodeWithComments":["MediaItem","Page","Post"],"HierarchicalContentNode":["MediaItem","Page"],"NodeWithContentEditor":["Page","Post"],"NodeWithFeaturedImage":["Page","Post","Project"],"NodeWithRevisions":["Page","Post"],"NodeWithPageAttributes":["Page"],"NodeWithExcerpt":["Post"],"NodeWithTrackbacks":["Post"],"ContentRevisionUnion":["Post","Page"],"MenuItemObjectUnion":["Post","Page","Category","Tag"]}
Code language: JSON / JSON with Comments (json)

Update Faust Configuration

Add a faust.config.js file at the root level of your app. In the faust.config.js file, incorporate the following:

NOTE:
experimentalPlugins is being deprecated and replaced with plugins in the faust.config.js file. Please update your configuration accordingly.

// faust.config.js
import { ProjectTemplatePlugin } from './plugins/ProjectTemplatePlugin';
import { RelayStylePaginationPlugin } from './plugins/RelayStylePaginationPlugin';
import { setConfig } from '@faustwp/core';
import possibleTypes from './possibleTypes.json';
import templates from './wp-templates';

/**
 * @type {import('@faustwp/core').FaustConfig}
 **/
export default setConfig({
  plugins: [
    new ProjectTemplatePlugin(),
    new RelayStylePaginationPlugin(),
  ],
  possibleTypes,
  templates,
});

Code language: JavaScript (javascript)

Migrate Your Next.js Pages to the Template Hierarchy

If you decide to use Faust’s WP Template Heirarchy, you will need to convert your Next.js pages to components for each template and according to hierarchy rules.

Take a look at the migration guide detailing these steps here.

Update Components to Apollo Syntax Instead of GQty Syntax

Each component in the components file in your app that utilizes GQty specific syntax will need to be switched to Apollo‘s syntax in order to work correctly with the new version of Faust.

For more information on how to make the switch, visit the migration guide here.

Remove GQty Related Assets

Lastly, remove any unnecessary remnants of GQty’s file structure.

For example, in the src folder, remove the client and the hooks folders.