If you are coding a lot of web applications, it helps to have a standard directory structure that you start with. That you always know where files should go, etc. This page contains my (current) take on the topic.<\/p>\n
These steps assume you already have\u00a0Subversion<\/a>\u00a0set up and working. If it’s on a remote machine, use the appropriate protocol designator ( Alternatively, you could just put the directory creation commands into a script and run that script every time you needed to set up a new project. But we should all be using some sort of\u00a0version control<\/a>\u00a0system, now shouldn’t we?<\/p>\n Just copy and paste the commands into a terminal session on your workstation or server, and that should be all you need to do to set this up. You will need to make some changes for your actual repository path and project names, of course. I’m just putting sample stuff in my examples.<\/p>\n Set up your desired directory “skeleton” in a temporary directory. Note that this uses a “shortcut” feature of <code>mkdir<\/code> that allows you to specify multiple subdirectories at once. The format is important – no spaces after the , etc.<\/p>\n You now have a directory system that looks like this:<\/p>\n This will yield a website structure like this:<\/p>\n Of course you can add other directories as needed to further organize the website, but this will give you a good beginning, and help keep things organized. You will always know the path to CSS and Javascript files, regardless of where on the site you reference them in your HTML.<\/p>\n Once the directories are set up, I put some “marker” files in certain directories as well, which get filled in for the specific project once I start working on it:<\/p>\n I also put empty\u00a0 Set up a default CSS file (customize per your own experiences, needs, etc.) and stick it in the\u00a0\/include\/css<\/tt>\u00a0directory. See\u00a0Five Steps to CSS Heaven<\/a>\u00a0for more ideas.<\/p>\n Note that I use the “echo >>” mechanism rather than an actual file so that you can copy\/paste all these commands and it will “just work” – no file editor needed at this stage.<\/p>\n Next, create a new project repository:<\/p>\n Finally, import the directory structure into the project:<\/p>\n Gives this result:<\/p>\n Your project is now ready to check back out and start working on:<\/p>\n Gives this result:<\/p>\n A final note — if you are using Subversion,\u00a0DO NOT<\/strong>\u00a0mess with the\u00a0 Keywords for the search engines: subversion repository directory structure template layout example sample recommended web app webapp application<\/p>\n","protected":false},"excerpt":{"rendered":" If you are coding a lot of web applications, it helps to have a standard directory structure that you start with. That you always know where files should go, etc. This page contains my (current) take on the topic. These steps assume you already have\u00a0Subversion\u00a0set up and working. If it’s on a remote machine, use … Continue reading “Subversion repository structure for web applications”<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[3],"class_list":["post-4","post","type-post","status-publish","format-standard","hentry","category-web-app-dev","tag-subversion"],"_links":{"self":[{"href":"https:\/\/brucetimberlake.com\/blog\/wp-json\/wp\/v2\/posts\/4","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/brucetimberlake.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/brucetimberlake.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/brucetimberlake.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/brucetimberlake.com\/blog\/wp-json\/wp\/v2\/comments?post=4"}],"version-history":[{"count":12,"href":"https:\/\/brucetimberlake.com\/blog\/wp-json\/wp\/v2\/posts\/4\/revisions"}],"predecessor-version":[{"id":16,"href":"https:\/\/brucetimberlake.com\/blog\/wp-json\/wp\/v2\/posts\/4\/revisions\/16"}],"wp:attachment":[{"href":"https:\/\/brucetimberlake.com\/blog\/wp-json\/wp\/v2\/media?parent=4"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/brucetimberlake.com\/blog\/wp-json\/wp\/v2\/categories?post=4"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/brucetimberlake.com\/blog\/wp-json\/wp\/v2\/tags?post=4"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}http:\/\/<\/code>,\u00a0svn:\/\/<\/code>, etc.) below where you see\u00a0file:\/\/<\/code>.<\/p>\ncd ~\r\nmkdir -p skeleton\/{branches,tags,trunk\/{data,db,doc,util,www\/{include\/{css,js},media\/img}}}<\/pre>\n\/home\/user\r\n \/skeleton\r\n \/data\r\n \/db\r\n \/doc\r\n \/util\r\n \/www\r\n \/include\r\n \/css\r\n \/js\r\n \/media\r\n \/img<\/pre>\n
[web_root]\r\n \/include\r\n \/css\r\n \/js\r\n \/media\r\n \/img<\/pre>\n
\n
\/data<\/code>\u00a0is where any “test” data goes that you need to prepopulate the project. This may not be relevant for the app you are building, so you could leave this one out.<\/li>\n\/db<\/code>\u00a0contains SQL scripts used to create and populate any needed databases and tables. Be sure to add migration or update\/upgrade scripts if the schemas change at some point during the project’s lifecycle.<\/li>\n\/doc<\/code>\u00a0is for any and all project documentation. Be sure to paste important emails into text files and stash them in here!<\/li>\n\/util<\/code>\u00a0is where any supporting scripts (Perl, shell, etc.) would go.<\/li>\n\/www<\/code>\u00a0is the root dir for the website content.<\/li>\n\/www\/include<\/code>\u00a0is where any included files would go (think PHP’s\u00a0require<\/code><\/a>\u00a0and\u00a0include<\/code><\/a>\u00a0commands).<\/li>\n\/www\/include\/css<\/code>\u00a0is where all your CSS files go. You are using CSS, right?<\/li>\n\/www\/include\/js<\/code>\u00a0is where all Javascript goes. Javascript should be included in your HTML and PHP files via the\u00a0<script src=\"...\"><\/code>, not inline.<\/li>\n\/www\/media<\/code>\u00a0should be pretty obvious. I like to use subdirectories for each media type to help keep things organized. Almost every project uses at least one image someplace, so I default to creating the\u00a0\/www\/media\/img<\/code>\u00a0directory in the skeleton. Later, if I need video, audio, flash, etc., I would make new subdirectories for them as well.<\/li>\n<\/ul>\ncd ~\/skeleton\/trunk\r\ntouch FAQ HISTORY LICENSE README RELEASE-NOTES UPGRADE\r\ntouch doc\/ABOUT<\/pre>\n
index.html<\/code>\u00a0files into the various web directories, to prevent direct access to them when the project is deployed on a live server:<\/p>\ntouch www\/include\/index.html\r\ntouch www\/include\/css\/index.html\r\ntouch www\/include\/js\/index.html\r\ntouch www\/media\/index.html\r\ntouch www\/media\/img\/index.html<\/pre>\n
cd include\/css\r\ntouch style.css\r\n\r\necho \"\/* Design and Code (c) Company Name, Inc. *\/\" >> style.css\r\necho \"html, body { padding: 0; margin: 0; }\" >> style.css\r\necho >> style.css\r\necho \"body {\" >> style.css\r\necho \"\tfont: normal 12px\/1.5em sans-serif;\" >> style.css\r\necho \"\tbackground: #fff; }\" >> style.css\r\necho >> style.css\r\necho \"\/* Headings H1-H6 *\/\" >> style.css\r\necho \"h1 { }\" >> style.css\r\necho >> style.css\r\necho \"h2 { }\" >> style.css\r\necho >> style.css\r\necho \"h3 { }\" >> style.css\r\necho >> style.css\r\necho \"h4 { }\" >> style.css\r\necho >> style.css\r\necho \"h5 { }\" >> style.css\r\necho >> style.css\r\necho \"h6 { }\" >> style.css\r\necho >> style.css\r\necho \"\/* Paragraph and Link Styles *\/\" >> style.css\r\necho \"p { }\" >> style.css\r\n\r\ncd ..\/..<\/pre>\nsvnadmin create --fs-type fsfs \/path\/to\/repos\/projectname<\/pre>\n
svn import ~\/skeleton file:\/\/\/path\/to\/repos\/projectname -m \"Initial project 'projectname' setup\"<\/pre>\n
Adding \/home\/user\/skeleton\/trunk\r\nAdding \/home\/user\/skeleton\/trunk\/HISTORY\r\nAdding \/home\/user\/skeleton\/trunk\/LICENSE\r\nAdding \/home\/user\/skeleton\/trunk\/www\r\nAdding \/home\/user\/skeleton\/trunk\/www\/media\r\nAdding \/home\/user\/skeleton\/trunk\/www\/media\/index.html\r\nAdding \/home\/user\/skeleton\/trunk\/www\/media\/img\r\nAdding \/home\/user\/skeleton\/trunk\/www\/media\/img\/index.html\r\nAdding \/home\/user\/skeleton\/trunk\/www\/include\r\nAdding \/home\/user\/skeleton\/trunk\/www\/include\/css\r\nAdding \/home\/user\/skeleton\/trunk\/www\/include\/css\/index.html\r\nAdding \/home\/user\/skeleton\/trunk\/www\/include\/css\/style.css\r\nAdding \/home\/user\/skeleton\/trunk\/www\/include\/index.html\r\nAdding \/home\/user\/skeleton\/trunk\/www\/include\/js\r\nAdding \/home\/user\/skeleton\/trunk\/www\/include\/js\/index.html\r\nAdding \/home\/user\/skeleton\/trunk\/www\/index.html\r\nAdding \/home\/user\/skeleton\/trunk\/db\r\nAdding \/home\/user\/skeleton\/trunk\/doc\r\nAdding \/home\/user\/skeleton\/trunk\/doc\/ABOUT\r\nAdding \/home\/user\/skeleton\/trunk\/RELEASE-NOTES\r\nAdding \/home\/user\/skeleton\/trunk\/UPGRADE\r\nAdding \/home\/user\/skeleton\/trunk\/FAQ\r\nAdding \/home\/user\/skeleton\/trunk\/data\r\nAdding \/home\/user\/skeleton\/trunk\/README\r\nAdding \/home\/user\/skeleton\/trunk\/util\r\nAdding \/home\/user\/skeleton\/branches\r\nAdding \/home\/user\/skeleton\/tags\r\n\r\nCommitted revision 1.<\/pre>\n
cd ~\r\nsvn co file:\/\/\/path\/to\/repos\/projectname\/trunk work<\/pre>\n
A work\/HISTORY\r\nA work\/LICENSE\r\nA work\/www\r\nA work\/www\/media\r\nA work\/www\/media\/index.html\r\nA work\/www\/media\/img\r\nA work\/www\/media\/img\/index.html\r\nA work\/www\/include\r\nA work\/www\/include\/css\r\nA work\/www\/include\/css\/index.html\r\nA work\/www\/include\/css\/style.css\r\nA work\/www\/include\/index.html\r\nA work\/www\/include\/js\r\nA work\/www\/include\/js\/index.html\r\nA work\/www\/index.html\r\nA work\/db\r\nA work\/doc\r\nA work\/doc\/ABOUT\r\nA work\/RELEASE-NOTES\r\nA work\/FAQ\r\nA work\/UPGRADE\r\nA work\/data\r\nA work\/README\r\nA work\/util\r\nChecked out revision 1.<\/pre>\n
.svn<\/code>\u00a0directories anyplace within your project! When you are deploying the project to a web server (testing, production, etc.), you can just exclude them (use the\u00a0-C<\/code>\u00a0switch for\u00a0rsync<\/code>, for example).<\/p>\n