Configuration your Gatsby project
tip
If the configuration process is not successful, you can refer to our template project.
#
0. Import TailwindCSS to your projectplease 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- npm
- yarn
npm install --save-dev babel-preset-gatsby @derealize/babel-plugin-transform-react
yarn add --dev babel-preset-gatsby @derealize/babel-plugin-transform-react
{ "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 tailwindcssmodule.exports = { mode: "jit", purge: [ "./src/**/*.{js,jsx,ts,tsx}", "./derealize-jit.html" ], ...}
#
3. Config derealize ..."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:- Derealize Editor
- Derealize Studio
1 Import Project to Derealize Editor App.
2 Command 'yarn develop' to start project.
3 Open the project in Derealize Editor App.
1 Import Project to Derealize Editor App. Carefully configure the git branch you want Derealize Studio to manage.
2 Open & Start the project directly in Derealize Studio App.