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 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 @derealize/babel-plugin-transform-react
yarn add --dev @derealize/babel-plugin-transform-react
module.exports = { style: { postcss: { plugins: [require('tailwindcss'), require('autoprefixer')], }, }, babel: { plugins: ['@derealize/transform-react'], },};
#
2. Config tailwindcssmodule.exports = { mode: "jit", purge: [ './src/**/*.{js,jsx,ts,tsx}', './public/index.html', "./derealize-jit.html", ], ...}
#
3. Config derealize ... "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 eventThis step is only required when you have imported react-router or any other navigational components.
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:- Derealize Editor
- Derealize Studio
1 Import Project to Derealize Editor App.
2 Command 'yarn start' 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.