Skip to main content

Migrating the Portfolio Blueprint to New Faust

Migrate the portfolio blueprint from the old version of Faust to the new Faust.

Update/Import New Dependencies​

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

package.json
{
  "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.1.4",
    "@faustwp/core": "0.1.3",
    "classnames": "^2.3.1",
    "graphql": "^16.6.0",
    "next": "12.2.4",
    "normalize.css": "^8.0.1",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "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": ">=14.0.0",
    "npm": ">=6.0.0"
  }
}

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

Generate Possible Types​

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

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"]}

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:

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({
  experimentalPlugins: [
    new ProjectTemplatePlugin(),
    new RelayStylePaginationPlugin(),
  ],
  possibleTypes,
  templates,
});

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 heirarchy 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.

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

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