Skip to main content

Configuration your Gatsby project

tip

If the configuration process is not successful, you can refer to our template project.

0. Import TailwindCSS to your project#

please check the tailwindcss documentation

caution

Derealize strongly recommend to use jit mode of tailwindcss to run your project, so you need import thetailwindcss v2.1+ version

1. Import derealize babel plugin#

If you want to know why?

npm install --save-dev babel-preset-gatsby @derealize/babel-plugin-transform-react
./.babelrc
{  "plugins": ["@derealize/transform-react"],  "presets": [    [      "babel-preset-gatsby",      {        "targets": {          "browsers": [">0.25%", "not dead"]        }      }    ]  ]}
note

about babel-preset-gatsby, refer to the gatsby document

2. Config tailwindcss#

./tailwind.config.js
module.exports = {  mode: "jit",  purge: [    "./src/**/*.{js,jsx,ts,tsx}",    "./derealize-jit.html"  ],  ...}

3. Config derealize#

./package.json
  ..."scripts": {    "develop": "gatsby develop",    "start": "gatsby develop",    "build": "gatsby build",    "serve": "gatsby serve",    "clean": "gatsby clean",    "format": "prettier --write **/*.{js,jsx,ts,tsx} --config ./.prettierrc"  // Optional  },  "derealize": {    "runScript": "develop",                     // Only required for Derealize Studio with node runtime    "port": 8000,                               // Only required for Derealize Studio with node runtime    "formatScript": "format",                   // Optional    "baseUrl": "http://localhost:8000",    "pages": [      "/",      "/Welcome",      ...    ],    "assetsPath": "./public/assets",            // save your images    "assetsUrl": "/assets",                     // public path of the images    "applyCssFile": "./src/styles/globals.css"  // entry css file, so derealize can be parsed @apply  },  ...
note

The npm script 'format' is not required, but we think you will definitely need it. to prevent improperly formatting your react code every time 'drealize' updates it.

That's enough!

Now you can import/start project in Derealize Editor or Studio:#

1 Import Project to Derealize Editor App.

2 Command 'yarn develop' to start project.

3 Open the project in Derealize Editor App.