Dev Setup

For the local development setup, there are a few additional external steps you need to follow.

Setup Admin



  • Navigate to the example-admin folder.
  • Run the command npm install.
  • Create a .env file and add all the environmental variables, just like in the production app.
NameValue
VITE_UPLOADWSRV
VITE_SITEEX
VITE_SUPER_ADMINsuper admin email
VITE_OPENAI_API_KEY*************
VITE_OPENAI_IMAGE_API_KEY*************
VITE_PEXELS_API_KEY*************
VITE_UNSPLASH_ACCESS_KEY*************
VITE_ADMINhttps://example-admin.pages.dev
✨ To resolve the CORS issue, we will use VITE_ADMIN as a proxy.
  • Run the command npm run dev.
  • The site should now load at http://localhost:5173.
Since this is local development, follow these steps for authentication:
  • Go to admin.example.com and open the browser's developer tools.
  • Navigate to the Application tab, and under Cookies, select https://admin.example.com.
  • Copy the value of the CF_Authorization cookie.
  • Now, go to your local project editor and open src > stores > admin.js file.
  • Go to line 46, uncheck the cookies.set line, and set the value to the copied CF_Authorization key.
cookies.set('CF_Authorization', 'copied CF_Authorization value goes here');
  • Save the file and reload localhost. You are now authenticated.
  • You can revert the changes in admin.js and continue working on the project.

Setup Frontend



  • Navigate to the example folder.
  • Run the command npm install.
  • Create a .env file and add all the environmental variables, just like in the production app.
NameValue
VITE_NAMEExample.com
VITE_CDNhttps://cdn.example.com
VITE_ADMINhttps://example.pages.dev
✨ To resolve the CORS issue, we will use VITE_ADMIN as a proxy.
  • Run the command npm run dev.
  • The site should now load at http://localhost:5173.

✨ Everything is set for development! If you have any questions, feel free to let us know.
Table of Contents