This project was designed to help developers worry less about coding css and javascript and testing on hubspot and focus more on the stuff we enjoy! Development!

This project includes:

• Hot reload on external pages (hubspot) on localhost using browsersync
• Replacement of hubspot css and js files with your own local files
• Sass compiler / linter
• JS Compiler / linter
• Bootstrap and font awesome as optional imports
• Deployment to hubspot design manager

To get started first we need to checkout this project and run

git clone https://github.com/Absanater/hubspot-frontend-local your-project-name
npm install

Next we need to decide what we are going to be using the application for. There is Development on local, deployment to hubspot file manager or both. In the main directory there should be a file called config.json

{
   "api_key": "YOUR_API_KEY",
      "files": {
         "css": {
            "path": "/dist/main.css",
            "useLocal": true,
            "overWriteLocal": true,
            "id": 6023636249
         },
         "js": {
            "path": "/dist/main.js",
            "useLocal": true,
            "overWriteLocal": true,
            "id": 6021351972
         }
   }
}

After the config has been set up we are ready to start using the application!

To start running the code all we need now is the preview link to the page we are going to edit within hubspot e.g "https://my.hspage.com/my-page?hs_preview=eQsNmhHz-5934786515"

And now the following should be entered into your terminal at the folder:

npm start --myPage=https://my.hspage.com/my-page?hs_preview=eQsNmhHz-5934786515

That should then popup a window from your page in your browser. The SASS and JS can be found inside

• src/scripts
• src/styles

When writing JS you can create new files other than main.js and do your work. Whenever a JS file is saved OR sass file the site should reload on the page with your changes being picked up. Linting should show up when changes are made and can be edited in eslintrc file or in the gulpfile for the javascript although its recommended to stick to what is there for use and readability!

To deploy to filemanager ensure the directory is where you want the files to go in hubspot inside of config.json then run:

npm run deploy

This will then give a promp asking to continue. Y for yes will then finish the deploy and that is it.

Your file should now be in hubspot.

• If CSS is used as combined-css within hubspot overwrite local will not be able to detact its path and replace with the local css file in development.
• Some people have had problems with caching/updating times with files within hubspot

Feel free to contribute and improve this project. Hoping in the future we can have:

• Deployments of templates
• Editing of html pages and modules
• Multiple CSS / JS files
• Workaround for "combined.css"

Big thanks to everyone who has made contributions to the project.

Daniel Ord