[HubSpot CMS React] How to Add Global CSS for All Modules in Development Server

[jason-k]

I’m looking for a way to add global CSS that applies to all modules in dev server (@hubspot/cms-dev-server), accessible at http://hslocal.net:3000/.

The global CSS should only be applied in the development server environment and not affect the deployed HubSpot modules. Specifically, I’d like to know:

• How to import a CSS file (e.g., global.css) to be applied globally across all modules during development.
• Where the entry point (e.g., App.js or index.js) of the dev server can be located. I've searched for this entry point in the dev server setup but have not been able to find it, which makes it unclear where global styles can be included.

Thank you

[Markestac]

Hi @jason-k 

You'll need to modify the dev server setup to apply global CSS (like global.css) only in the dev server environment. Here’s how you can do it:
Step 1: Create a global.css file in your project.
Step 2: Modify your index.js or the main entry point file of your development setup The entry point might be index.js or App.js in a typical React-based project (which is common for HubSpot module development).
In a HubSpot CMS development environment, your entry point is typically defined in the HubSpot/cms-dev-server configuration. The entry point is usually located in the root directory or the src directory of your project.

Common places to look for entry points:
src/index.js: This is often the main entry point in React-based setups.
src/manifest.json: Some custom module setups have manifest.json that may include references to JavaScript files that act as the entry point for your modules.

Finding the entry point in the dev server setup:
In the HubSpot CMS dev server environment (HubSpot/cms-dev-server), check your src directory to locate index.js or App.js. This file should handle the overall application rendering.
You may also have a webpack.config.js file or similar configuration where you can add global imports or customize how the development server is set up.

You should conditionally load the global CSS only in the development environment to avoid affecting your production code.

In index.js or the main entry file, you can check if the environment is development and import the CSS file conditionally

[Jaycee_Lewis]

Hey, @jason-k 👋 Welcome to the community. The dev server emulates the HubSpot environment and lacks a single React entry point. We'll leave this open in case other community members have a workaround or other suggestions for you. 

Best,

Jaycee