I'm just looking into Umbraco as a posssible platform for our team and was wondering if it's possible to change the location of the Scripts and CSS directories? Our team has a well defined project structure which I was hoping to reuse so it would be great if we could get our Umbraco projects to match that structure.
We like to keep our assets stored together in a structure similar to this:
/Assets/CSS
/Assets/Images
/Assets/Scripts
etc..
I've tried changing the Scripts directory in the umbracoSettings.config ScriptEditor section but the value I entered does not seem to work. I've rebuild my solution and recycled the AppPool but the new value is for scriptFolderPath is not being obeyed.
Is there something I'm missing or have I misunderstood this setting? Also is there a similiar configuration for stylesheets.
You can just create a virtual directory to new physical location for CSS folder etc. I'm assuming for images this is static site furniture stuff like logo etc. Normal images are handled via the media area in which case you could remap the folder.
All of this aside there is no reason your workflow can't create assets to the locations you listed. The Css folder is only used for stylesheets that are added via the back office which are typically used when assigning styles to the Rich Text Editor. You could just add an @import statement in the CSS file to pull in from your other folder as a workaround.
Umbraco is very flexible and I would be really surprised if you can't make it work for you.
Do you you need scripts and CSS to be editable via Umbraco interface? If not, just put them where you want. I generally find in most situations editing of scripts and CSS directly via Umbraco isn't a great idea - (it breaks source control; doesn't work well with SASS and minifiers etc). Imagine what would happen is someone edited scripts on live site and these weren't in your dev source control - you'd just overwrite next push.
@David Hudson, Thanks for that information. I've added those app setting overrides, umbracoCssDirectory and umbracoScriptsPath, to my web.config but I'm getting an error with UmbracoExamine!?!
Configuration Error
Description: An error occurred during the processing of a configuration file required to service this request. Please review the specific error details below and modify your configuration file appropriately.
Parser Error Message: Exception has been thrown by the target of an invocation.
Source Error:
Line 10: <ExamineIndexProviders>
Line 11: <providers>
Line 12: <add name="InternalIndexer" type="UmbracoExamine.UmbracoContentIndexer, UmbracoExamine"
Line 13: supportUnpublished="true"
Line 14: supportProtected="true"
Do you have any idea what might be causing that? I'm using Umbraco 7.6.5 btw.
@Dan Dipolo, No, I guess we don't need them editable as our front end team generally use SASS, minifiers etc... as you've mentioned. But I was just trying to setup a base solution that we could branch further projects from and thought it would be best to include core functionality where possible.
@David Hudson, Sorry, managed to figure out the error. It was a typo in my web.confg. (Hangs head in shame)
@Dan Diplo, On a side note I'd be really interested in hearing more about Umbraco and source control. I'll make a separate thread but do you have any quick pointers or links to any resources that could get me started?
@Andy - You don't really need anything particular for Umbraco - you can treat it as any other web development project in regard to source control. The main thing is that you only put in source control stuff that isn't generated - ie. you store your SASS files in source control, but not the output CSS. Likewise you'd store your raw C# / ASP.NET code in source control, but not any generated DLLs.
Most people tend to use GIT nowadays - it works well in teams. If you are on Windows and need a graphical client then I'd recommend Git Extensions. Visual Studio also has a decent Git client in-built.
For teams you probably want a central repository to store projects that other members can check-out. Services like BitBucket, GitHub, GitLab. You'd likely want a private repository if you don't want to share your code with the world! Most of these services also have stand-alone versions you can run on your own servers, if you have them.
So your workflow would be:
When a team member comes to work on a project they PULL the latest
changes down from GIT server.
They then make changes locally, committing them to their local
repository.
When finished they PUSH them back to GIT server.
Some people have automated build tools that hook into GIT and will then deploy changes automatically. But you can also just use your existing tools like FTP to manually copy over changes.
It's really too big a topic to cover in a post, but there's loads of stuff on internet.
Thanks Dan, our team is familiar with source control and have worked with GIT and SVN for years. It was more source control in relation to Umbraco specifically that I was interested in. For example, the advantages of using extensions like uSync to source control Document Types etc... As you've stated though this is a broad subject so I'll make a separate thread to explore it further.
I use uSync to manage document and datatype schema changes. It works really well for me.
My workflow restore a copy of production database and assets into dev create a new branch add a new feature full export out of uSync. Add to git, all the usync files plus code changes,create pull request, merge into master, CI then kicks in and does a release via TFS. Then in production manually run full import and off you go.
I know you can tell uSync via configuration file to import on application restart but I like to do it manually after TFS deployment for various reasons.
uSync has been flawless and saves repeating the steps in the UI which is error prone.
Courier is another option but I didn't have any experience of this so went with whats was familiar.
I also source control umbraco which i know is not needed but i like to see after upgrades exactly what has changed. Also I have some custom stuff which I like to manage through git diffs.
That's really helpful, thankyou Dave. It certainly gives me a starting point to get going. I had been worried about relying on a third party package but I will definitely give it a go now.
You would be wise to consider what third party plugins you need. Rule of thumb is picking packages that have MVP contributors or at least a steady stream of commits, not a weekend project.
Here is a list of packages I always use for Umbraco and only ever choose ones that live on NuGet. I also set the version number.
Umbraco CMS
Umbraco is an open source MVC structured CMS written in C#
Install-Package UmbracoCms -version 7.6.5
Usync
uSync in an umbraco package that takes the bits of umbraco that are stored in a database and moves them to disk, so you can source control, copy and move your umbraco site between computers and servers. You can control the settings for how uSync works either by editing the xml files in teh Config folder or by using the UI through the developer section in the back office.
Install-Package uSync -version 3.3.3.740
Nested Content
Nested Content is a new list editing property editor for Umbraco 7+, similar to likes of Embedded Content and Archetype, however Nested Content uses the power of doc types to define the list item blue prints. By using doc types, we get the benefit of an easy / reusable UI we are all familiar with and also get to re-use all the standard data types as our field editors rather than being limited to a subset of "allowed" types.
Install-Package Our.Umbraco.NestedContent -version 0.5.0
Doc Type Grid Editor
Doc Type Grid Editor is an advanced grid editor for the new Umbraco Grid, offering similar functionality as the macro grid editor but using the full power of the doc type editor and data types.
With the Doc Type Grid Editor then, we bridge that gap, allowing you to reuse doc type definitions as blue prints for complex data to be rendered in a grid cell.
Install-Package Our.Umbraco.DocTypeGridEditor -version 0.4.0
nuPickers
nuPickers is a single dll distribution containing a collection of Umbraco v7 Property Editors:
Install-Package nuPickers -version 1.5.3
Slimsy
Slimsy allows effortless responsive Images with Slimmage and Umbraco. Slimmage.js used in conjunction with ImageProcessor.Web (included in Umbraco v7.1) and the built-in Umbraco Image Cropper will make your responsive websites images both adaptive and "retina" quality (if supported by the client browser).
Slimsy installs everything you need to use Slimmage.js in Umbraco v7.1. It includes Slimmage.js, SlimResponse and some helper methods that work with both dynamic and typed published content models.
Install-Package Our.Umbraco.Slimsy -version 1.1.7
DiploTraceLogViewer
Diplo Trace Log Viewer is a Developer tree section (in Umbraco 7) or a dashboard plugin (in Umbraco 6) that allows you to easily select and view the contents of the trace logs that Umbraco now generates. The control also allows you to search, order and filter log events (e.g. you may only wish to view Errors or Warnings) all from within Umbraco.
```
Diplo Audit Log Viewer allows you to easily view and search the audit data that is stored in the umbracoLog table in your site's database. This table contains all changes that are made to all content in your site (eg. Save, Publish, Delete events).
Install-Package DiploAuditLogViewer -version 1.0.1
X.PagedList
X.PagedList.Mvc is a library that enables you to easily take an IEnumerable/IQueryable, chop it up into "pages", and grab a specific "page" by an index. PagedList.Mvc allows you to take that "page" and display a pager control that has links like "Previous", "Next", etc.
Change Scripts and CSS directory locations
Hi,
I'm just looking into Umbraco as a posssible platform for our team and was wondering if it's possible to change the location of the Scripts and CSS directories? Our team has a well defined project structure which I was hoping to reuse so it would be great if we could get our Umbraco projects to match that structure.
We like to keep our assets stored together in a structure similar to this:
I've tried changing the Scripts directory in the umbracoSettings.config ScriptEditor section but the value I entered does not seem to work. I've rebuild my solution and recycled the AppPool but the new value is for scriptFolderPath is not being obeyed.
Is there something I'm missing or have I misunderstood this setting? Also is there a similiar configuration for stylesheets.
Thanks for any help. :)
Andy
Hi Andy,
You have a few potential ways to do it.
Example of the AppSetting override
This shows all the available Source code for directory settings
Here is a post about a similar question
You can just create a virtual directory to new physical location for CSS folder etc. I'm assuming for images this is static site furniture stuff like logo etc. Normal images are handled via the media area in which case you could remap the folder.
All of this aside there is no reason your workflow can't create assets to the locations you listed. The Css folder is only used for stylesheets that are added via the back office which are typically used when assigning styles to the Rich Text Editor. You could just add an @import statement in the CSS file to pull in from your other folder as a workaround.
Umbraco is very flexible and I would be really surprised if you can't make it work for you.
Hope this helps,
Dave
Do you you need scripts and CSS to be editable via Umbraco interface? If not, just put them where you want. I generally find in most situations editing of scripts and CSS directly via Umbraco isn't a great idea - (it breaks source control; doesn't work well with SASS and minifiers etc). Imagine what would happen is someone edited scripts on live site and these weren't in your dev source control - you'd just overwrite next push.
@David Hudson, Thanks for that information. I've added those app setting overrides, umbracoCssDirectory and umbracoScriptsPath, to my web.config but I'm getting an error with UmbracoExamine!?!
Do you have any idea what might be causing that? I'm using Umbraco 7.6.5 btw.
@Dan Dipolo, No, I guess we don't need them editable as our front end team generally use SASS, minifiers etc... as you've mentioned. But I was just trying to setup a base solution that we could branch further projects from and thought it would be best to include core functionality where possible.
@David Hudson, Sorry, managed to figure out the error. It was a typo in my web.confg. (Hangs head in shame)
@Dan Diplo, On a side note I'd be really interested in hearing more about Umbraco and source control. I'll make a separate thread but do you have any quick pointers or links to any resources that could get me started?
@Andy - You don't really need anything particular for Umbraco - you can treat it as any other web development project in regard to source control. The main thing is that you only put in source control stuff that isn't generated - ie. you store your SASS files in source control, but not the output CSS. Likewise you'd store your raw C# / ASP.NET code in source control, but not any generated DLLs.
Most people tend to use GIT nowadays - it works well in teams. If you are on Windows and need a graphical client then I'd recommend Git Extensions. Visual Studio also has a decent Git client in-built.
For teams you probably want a central repository to store projects that other members can check-out. Services like BitBucket, GitHub, GitLab. You'd likely want a private repository if you don't want to share your code with the world! Most of these services also have stand-alone versions you can run on your own servers, if you have them.
So your workflow would be:
Some people have automated build tools that hook into GIT and will then deploy changes automatically. But you can also just use your existing tools like FTP to manually copy over changes.
It's really too big a topic to cover in a post, but there's loads of stuff on internet.
Thanks Dan, our team is familiar with source control and have worked with GIT and SVN for years. It was more source control in relation to Umbraco specifically that I was interested in. For example, the advantages of using extensions like uSync to source control Document Types etc... As you've stated though this is a broad subject so I'll make a separate thread to explore it further.
Thanks again for your help.
Hi Andy,
I use uSync to manage document and datatype schema changes. It works really well for me.
My workflow restore a copy of production database and assets into dev create a new branch add a new feature full export out of uSync. Add to git, all the usync files plus code changes,create pull request, merge into master, CI then kicks in and does a release via TFS. Then in production manually run full import and off you go.
I know you can tell uSync via configuration file to import on application restart but I like to do it manually after TFS deployment for various reasons.
uSync has been flawless and saves repeating the steps in the UI which is error prone.
Courier is another option but I didn't have any experience of this so went with whats was familiar.
I also source control umbraco which i know is not needed but i like to see after upgrades exactly what has changed. Also I have some custom stuff which I like to manage through git diffs.
Dave
That's really helpful, thankyou Dave. It certainly gives me a starting point to get going. I had been worried about relying on a third party package but I will definitely give it a go now.
Thanks,
Andy
Hi Andy,
You would be wise to consider what third party plugins you need. Rule of thumb is picking packages that have MVP contributors or at least a steady stream of commits, not a weekend project.
Here is a list of packages I always use for Umbraco and only ever choose ones that live on NuGet. I also set the version number.
Umbraco CMS
Umbraco is an open source MVC structured CMS written in C#
Install-Package UmbracoCms -version 7.6.5Usync
uSync in an umbraco package that takes the bits of umbraco that are stored in a database and moves them to disk, so you can source control, copy and move your umbraco site between computers and servers. You can control the settings for how uSync works either by editing the xml files in teh Config folder or by using the UI through the developer section in the back office.
Install-Package uSync -version 3.3.3.740Nested Content
Nested Content is a new list editing property editor for Umbraco 7+, similar to likes of Embedded Content and Archetype, however Nested Content uses the power of doc types to define the list item blue prints. By using doc types, we get the benefit of an easy / reusable UI we are all familiar with and also get to re-use all the standard data types as our field editors rather than being limited to a subset of "allowed" types.
Install-Package Our.Umbraco.NestedContent -version 0.5.0Doc Type Grid Editor
Doc Type Grid Editor is an advanced grid editor for the new Umbraco Grid, offering similar functionality as the macro grid editor but using the full power of the doc type editor and data types.
With the Doc Type Grid Editor then, we bridge that gap, allowing you to reuse doc type definitions as blue prints for complex data to be rendered in a grid cell.
Install-Package Our.Umbraco.DocTypeGridEditor -version 0.4.0nuPickers
nuPickers is a single dll distribution containing a collection of Umbraco v7 Property Editors:
Install-Package nuPickers -version 1.5.3Slimsy
Slimsy allows effortless responsive Images with Slimmage and Umbraco. Slimmage.js used in conjunction with ImageProcessor.Web (included in Umbraco v7.1) and the built-in Umbraco Image Cropper will make your responsive websites images both adaptive and "retina" quality (if supported by the client browser).
Slimsy installs everything you need to use Slimmage.js in Umbraco v7.1. It includes Slimmage.js, SlimResponse and some helper methods that work with both dynamic and typed published content models.
Install-Package Our.Umbraco.Slimsy -version 1.1.7DiploTraceLogViewer
Diplo Trace Log Viewer is a Developer tree section (in Umbraco 7) or a dashboard plugin (in Umbraco 6) that allows you to easily select and view the contents of the trace logs that Umbraco now generates. The control also allows you to search, order and filter log events (e.g. you may only wish to view Errors or Warnings) all from within Umbraco. ```
Install-Package DiploTraceLogViewer -version 2.3.2 ```
DiploAuditLogViewer
Diplo Audit Log Viewer allows you to easily view and search the audit data that is stored in the umbracoLog table in your site's database. This table contains all changes that are made to all content in your site (eg. Save, Publish, Delete events).
Install-Package DiploAuditLogViewer -version 1.0.1X.PagedList
X.PagedList.Mvc is a library that enables you to easily take an IEnumerable/IQueryable, chop it up into "pages", and grab a specific "page" by an index. PagedList.Mvc allows you to take that "page" and display a pager control that has links like "Previous", "Next", etc.
``` install-package X.PagedList.Mvc -version 7.0.0
Awesome, looks like I've got a lot of weekend reading!
Thanks,
Andy
is working on a reply...