For those who do a lot of front end / theming with Umbraco - do you develop your UI separately then import the assets or run things like npm / webpack within the Umbraco solution?
Hi Michael, I do a bit of both*(whether I'm working on Umbraco or other CMSs).
Normally the first step is to translate the Design into HTML/CSS/JS/Whatever Frameworks & Libraries.
Once you have a working copy of the front end you want, at times using mock data from JSON files if needed, you get the bits of code you need and place it into your Umbraco which sometimes will have already be setup by the backend devs if it's a more complex application and replace the static code with dynamic Umbraco goodness.
However, if you're running say ... SASS, Babel, etc on your front end build you can just throw the SASS folder you got from your initial front end work into your Umbraco based project folder and use some form of tooling to compile/minify/etc it all and place the resulting files into your CSS/JS folder where Umbraco is getting them from.
So technically speaking the front end tooling is kinda decoupled from Umbraco but interacts with it in parallel.
Of course if you're doing the Umbraco back end work too you could just set it up straight into the folder to start with and just run a command line npm run dev, gulp whatever to watch and compile/transpile the files as you work on them.
Please let me know if that's what you were looking for and whether you need further info.
Also if any devs out there have a different system please let us know.
We actually have a separate project for prototyping using "plain" razor files, and all of the associated styles/javascript. The directory structure for the non-view related files is the same as our umbraco instance - so the pathing remains the same.
We create our pages using plain razor markup with placeholder content so that it can be reviewed prior to "CMSing" it.
Once the design is approved, we create any new document types, data types, etc in the CMS, and initially copy the CShtml file into the template file. Once we verify that the placement is correct, we replace anything that is common directly (like headers and footers for example). And the map the CMS fields to the implemented razoer markup.
We also use "common" components for the header and footer that are simply included in the prototype pages, so we dont have lots of copies of the same mark up everywhere - and the designer-prototyper has a lighter lift to implement the actual content of the page.
Front end set up?
Hi guys,
For those who do a lot of front end / theming with Umbraco - do you develop your UI separately then import the assets or run things like npm / webpack within the Umbraco solution?
Looking for a decent front end workflow :)
Thanks
Hi Michael, I do a bit of both*(whether I'm working on Umbraco or other CMSs).
Normally the first step is to translate the Design into HTML/CSS/JS/Whatever Frameworks & Libraries.
Once you have a working copy of the front end you want, at times using mock data from JSON files if needed, you get the bits of code you need and place it into your Umbraco which sometimes will have already be setup by the backend devs if it's a more complex application and replace the static code with dynamic Umbraco goodness.
However, if you're running say ... SASS, Babel, etc on your front end build you can just throw the SASS folder you got from your initial front end work into your Umbraco based project folder and use some form of tooling to compile/minify/etc it all and place the resulting files into your CSS/JS folder where Umbraco is getting them from.
So technically speaking the front end tooling is kinda decoupled from Umbraco but interacts with it in parallel.
Of course if you're doing the Umbraco back end work too you could just set it up straight into the folder to start with and just run a command line npm run dev, gulp whatever to watch and compile/transpile the files as you work on them.
Please let me know if that's what you were looking for and whether you need further info.
Also if any devs out there have a different system please let us know.
Cheers.
Gui
We do something similar.
We actually have a separate project for prototyping using "plain" razor files, and all of the associated styles/javascript. The directory structure for the non-view related files is the same as our umbraco instance - so the pathing remains the same.
We create our pages using plain razor markup with placeholder content so that it can be reviewed prior to "CMSing" it.
Once the design is approved, we create any new document types, data types, etc in the CMS, and initially copy the CShtml file into the template file. Once we verify that the placement is correct, we replace anything that is common directly (like headers and footers for example). And the map the CMS fields to the implemented razoer markup.
We also use "common" components for the header and footer that are simply included in the prototype pages, so we dont have lots of copies of the same mark up everywhere - and the designer-prototyper has a lighter lift to implement the actual content of the page.
PS: Oh and there's this if you're a less fan:
https://our.umbraco.com/packages/developer-tools/less-dynamic-css-compiler/
:)
For Less, we actually use the Mad's "Web Compiler" package to transform them in visual studio. There are also add-ins that support sccs and bundling.
is working on a reply...