Suitable build folder structure for small web apps - build

Is the folder structure below suitable for small web application builds? I've just learnt Sass, and how to build system automating tasks with gulp.
From what I understand the following will happen;
I'll work on the Sass files in the src/sass folder.. which compliles via gulp to dist/css/main.css file.
The same will happen with src/js/ files, which concatenate into dist/js/main.js
I work on the PHP files directly in the dist/ folder
- /dist
- index.php
- /css
- main.css
- /js
- main.js
- /src
- /js
- file1.js
- file2.js
- /sass
- main.sass
- _additonal.sass
- /vendor
- /bootstrap
- _boostrap.sass
- /docs
package.json
gulpfile.js
I'm after some clarification of my process, and any advice on how to improve it :) I've had a look on Stackoverflow/google but can't find anything that isn't for larger scale projects.

Related

Maintain the media files after build with Docker Container - Django

I am using Django as a Web Framework. Azure NGINEX as WebServer. My Project is deployed with Docker Containers.
In my Django project root structure will be as follows:
root:
- app1
- app2
- media
whenever saving images, it will correctly save under media folder. But whenever doing "docker-compose up" it will replaces the source code, so that my media folder will be cleaned up everytime.
In my settings.py file, I have added as follows:
MEDIA_ROOT = os.path.join(BASE_DIR,'media')
MEDIA_URL = 'media/'
Kindly help me to maintain the media files with Docker based Environment
As mentioned in the previous answer, this isn't a best practice to handle media and static inside your project or app directory rather you can use a file or file storage server. But I am trying to give the answer to your question here.
Suppose you have a Django project directory named root and inside this, you are managing the media and static folders. As you are using Docker every time your container gets restarted, it wipes out the contents from both these folders. So what you have to do here is mount your media and static folders from inside of your container to your local storage i.e /var/lib/docker/volumes/{volume_name}/_data to persist your media and static files in between restarts of your container.
I am describing here the docker-compose version:
version: "3.8"
services:
app:
image: {your django project image}
#build: {direct build of your Dockerfile}
volumes:
- media:/src/media/
- static:/src/static/
volumes:
media:
static:
My goal here is to point out volume mount, so in the above code, you have to define volumes this way, where /src is the working directory defined in your Dockerfile using the WORKDIR directive. And in my case media and static are the direct children of the src folder. Now you can run docker volume ls to see your volume names and using the name you can inspect your volumes using this command docker volume inspect {volume_name}. Usually, you will find your volumes i.e media and static here -
/var/lib/docker/volumes/{{container_name]_media}/_data
/var/lib/docker/volumes/{{container_name]_static}/_data
Hope this clears the question.
You have to basically do 2 things:
Changing the directory to keep the media files to somewhere out of your source code directory - it's not any good practice to keep them in the source directory because of several reasons,
Using docker volumes in your docker-compose configuration file to persist your media directory. You can find the detailed documentation on the way to configure volumes in docker-compose here.

Custom JS not loading in apostrophe but CSS is

I'm having trouble getting my custom js to load when adding it to my themes module in apostrophe. Custom CSS is following the same setup and not encountering an error. I've followed documentation and previous SO solutions on theme setup.
Current setup:
my-theme
- public/
- css/
- foundation/
- foundation.css
- app.css (custom overide for foundation)
- js/
- foundation/
- vendor/
- foundation.js
- jquery.js
- what-input.js
- app.js
- index.js
In index.js I reference the stylesheet (app.css) and js (app.js which loads foundation.js)
What should I be doing so that foundation.js runs properly and doesn't get blocked? I do believe it's getting pushed with self.pushAsset
Functionality I'm trying to recreate:
https://foundation.zurb.com/building-blocks/blocks/topbar-center-logo.html
UPDATE:
I've discovered that the issue is with $(document).foundation() which lives in app.js and is needed to load foundation properly. Any suggestions on how I should be calling foundation?

How to organize Marionette projects between production and dev?

My question is simple. Imagine that you have a project built with marionette/backbone and you have two target medias: mobile and desktop. There is a backing server, written in DJango (or Ruby, or etc.).
How can I organize the project, so I can compile it to mobile and make it run for desktop? I mean, imagine collections, that have a url parameter. Set it to relative? To absolute, from scratch?
The project already has a feasible layout where I can compile it using r.js. It's pretty much like this:
repo-root/
- src/
- assets/
- css/
- images/
- project-code/
- vendor/
- build.js
- config.xml (phonegap conf)
- index.html
- main.js
- tests/
- bower.json
- .gitignore
here's an example of a collection:
define(function(require){
"use strict";
var Backbone = require("backbone");
var FeatureClass = require("atlas-backbone/models/FeatureClass");
return Backbone.Collection.extend({
url: "api/featureclasses",
model: FeatureClass
});
});
My question is how to organize this, so it can be compiled to a mobile device and run in a desktop version.
In my current job on my current project we make extensive use of Gulp and gulp tasks. We have Gulp tasks for production and for development, and setup different pipelines for each.
Optionally, if you would like to manage such things independently you can utilize more antiquated methods such as a mock server, relative URLs, or host file changes.

Django 1.4 project layout: Using mysite as the glue app

The old accepted answer for Django project layout specifies that it's good practice to make a glue application that ties in data from various other applications (e.g. for the home page).
Now that Django 1.4 automatically creates the ../project_name/project_name/ folder, should I use the project_name application as the glue application? Or should I still make a core app and leave the automatically created project_name application alone?
Over the last couple of projects, I've found the following layout to work quite well:
The common folder above contains all the stuff that doesn't really fit elsewhere, including the base urls.py, sitemaps.py, general template tags, general context processors and so on. I find this pretty clean and easy to maintain. Most importantly, the entire directory can be easily checked into git.
I wouldn't worry about the default layout for 1.4. Do whatever suits you.
- apps/
- /foo_app
- /bar_app
- common # The equivalent of the glue app you talk about
- confs # Uwsgi/supervisor/nginx/gunicorn etc. configurations
- /production
- /staging
- /dev
- docs
- fixtures
- media
- static
- requirements # for `pip freeze > ...`
- /production
- /staging
- /development
- scripts
- settings
- private.py # Secret Key etc., not put on VCS
- database.py # DB Settings, also no in VCS
- development.py
- production.py
- staging.py
- default.py # All Django's settings
- custom.py # Custom application settings
- templates

Deploy Django project: folder/project structure

My django project in eclipse has this project structure:
main-project-folder/
src/
main-app/
app1/
app2/
settings.py
manage.py
urls.py
__init__.py
media/
templates/
Can i deploy the project with this structure? In other words, is right way to put src and other folders (media, tempaltes, etc.) in the root folder of my server (where my domain is linked)?
Like:
my-server-folder/
src/
media/
...
I imagine that in my-server-folder i should put the entry point of project, but in my project i haven't an entry point in main-project-folder, or does django automatically redirect to an entry point of src/main-app folder (i think that it doesn't because i don't find any options that say to django to do it)?
Sure. That's a fine directory structure.
Keep in mind your web server isn't going to know what to do with the Django project unless you tell it. If your web server is Apache (which it probably is if you don't know) look here for instructions to set it up to run the Django app:
https://docs.djangoproject.com/en/dev/howto/deployment/wsgi/modwsgi/
And here for WSGI:
http://code.google.com/p/modwsgi/wiki/IntegrationWithDjango
Django apps aren't like PHP where you just upload them to the web server and they work.