Skip to main content

Configuration your create-react-app 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 @derealize/babel-plugin-transform-react
./craco.config.js
module.exports = {  style: {    postcss: {      plugins: [require('tailwindcss'), require('autoprefixer')],    },  },  babel: {    plugins: ['@derealize/transform-react'],  },};

2. Config tailwindcss#

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

3. Config derealize#

./package.json
  ...  "scripts": {    "start": "craco start",    "build": "craco build",    "test": "craco test --env=jsdom",    "eject": "react-scripts eject",    "format": "prettier --write **/*.{js,jsx,ts,tsx} --config ./.prettierrc"  // Optional  },  "derealize": {    "runScript": "start",                  // Only required for Derealize Studio with node runtime    "port": 3000,                          // Only required for Derealize Studio with node runtime    "formatScript": "format",              // Optional    "baseUrl": "http://localhost:3000",    "pages": [      "/",      "/Welcome",      ...    ],    "assetsPath": "./public/assets",        // save your images    "assetsUrl": "/assets",                 // public path of the images    "applyCssFile": "./src/index.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.

4. Handle the location change event#

This step is only required when you have imported react-router or any other navigational components.

./src/App.tsx
import { Switch, useLocation } from "react-router-dom";
function usePageViews() {  let location = useLocation();
  useEffect(() => {    if (typeof window === "undefined" || !window.derealize) return;    window.derealize.listenElement();  }, [location]);}
function App() {  usePageViews();  return <Switch>{/* your routes here */}</Switch>;}
export default App;

That's enough!

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

1 Import Project to Derealize Editor App.

2 Command 'yarn start' to start project.

3 Open the project in Derealize Editor App.