Django Beginner: Project Layout - html

This is my first time working with Django and while I'm finding the tutorial they provide to be very helpful, there is one major issue I'm having moving forward with my project.
The most confusing aspect of Django so far is the layout of files in a project. As of now, the layout of my project is as follows:
webapp/
manage.py
mysite/
__init__.py
settings.py
urls.py
wsgi.py
app/
__init__.py
models.py
tests.py
views.py
Bear with my naming here, I created a Django project "mysite" and an app "app". Here are the questions I find myself continually returning to:
I've noticed that in mysite/settings.py there is a section for apps, would I include the app I'm writing in this project in that section once I've finished it?
If I were to want to create a simple index.html page, where would a file like that go in this project organization?
I've read that static content like CSS or image files need to be contained within a simple "static" directory. Where would this go in this project organization? [ This would be for debugging purposes only, I've read this should never be done for production ]
My main goal right now is to just be able to view a simple html site before I begin delving into the models and views of the app I'm creating.

If your app needs one or more setting variables, then yes, you would put those in mysite/settings.py
Create a new folder mysite/templates/. This is where you want to put your template files. Organize your templates per app: mysite/templates/app/ would have the templates used by your app views. If you want to serve static templates such as a simple static index.html, then just throw that file in mysite/templates/index.html and then add the following to your urls.py file (no need to create a view for the index):
(r'^$', 'django.views.generic.simple.direct_to_template', {'template': 'index.html'}),
Static content would end up in something like mysite/static after you run the collectstatic command. See managing static files. The collectstatic command searches for static files in all locations specified in STATICFILES_DIRS and deploys them into the folder specified in STATIC_ROOT (mysite/static).

Related

How to deploy cesium-starter-app in Flask

I have a small web project running on a python flask microframework.
I have several .html pages working in the flask server with the #app.route method
#app.route('/')
def home():
return render_template('home.html')
and I want to be able to visualize a cesium-starter-app index.html as one of them to use it as a visualizer of some properties, i.e. position of a spacecraft.
To test if the server allows the cesium app to be displayed I have replaced one of the .html files of my web project with the index.html one provided in the project https://github.com/pjcozzi/cesium-starter-app and updated the browser but the page is blank.
I also copied the Source and ThirdParty folders and the server.js file to the same directory where the .html is located to see if this do the trick but it doesnt work.
Could you please advice me on how to proper deploy the cesium-starter-app (or any other cesium implementation that works) inside a Flask web?
Thanks in advance!

ReactJS link to local HTML file from different folder/project

I'm using ReactJS to build a site, and I want to create a link (a href="relativepath") to a local HTML file so that when the user clicks on the link, it'll open up the html page. The local file is in a different folder X outside of the project, and I don't want to upload it into my src folder because the html file depends on a lot of other files in X. Is there a good way to do so?
I also want to upload a different local HTML file that is already within the src folder of my React App. I currently have something like this:
import htmlFile from "../links/htmlFile.html"; export default function Something(props) { return (<a href={htmlFile}></a>)}
and it says in my terminal that
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <html>| | <head> >
I already tried adding in webpack + an htmlLoader, but I think I followed the steps incorrectly as I wasn't able to get it to work. I uninstalled those packages, so I'm now back to square one.
Thank you so much!
Just linking to or importing from a local file in some other location won't work unless those local files are also deployed to the server in the same location relative to the app (and the web server has access to that location).
So you'll need to copy the file and its linked dependencies in a folder that will be deployed along with your react build, but not where it'll get treated as part of the react codebase so webpack will try to compile it (so not in src either).
If you used create-react-app to set up your application, for example, this would be the public folder; other webpack setups may use different names but the general concept is the same.

using react-router in Next.js environment

I am currently using next.js framework. Is it possible to route components out of /pages directory?
Would not like to use 'react-router' (because it'll be complicated to edit server.js). If it is inevitable I will but is there any other way?
im afraid this is not possible in nextjs. nextjs builds its route view pages folder. what you can do that wont ruin your project structure or URLs is to
add your components to the new repo.
create your pages folder based on your routes in pervious project.
add index.js in each pages folder.
and import the main component instead of actually moving it to pages folder, for example:
export { default } from './components/users';
this way you can drag and drop your existing structure and only add your route as pages folders.
notes to consider:
next default routing is case sensitive so be careful about your folder names if you want a work around for that you should use nextjs v12 create all pages to lower case and config your project to translate all routes to lower case.
you can have nested routes by adding nested folder:
pages
userslist
userdetail
index.js
this structure will create this route:
/userlist/userdetail
if you have components you dont want for user to be accessible do not put them in pages
if you have dynamic routes such as id in your route you can specify it by adding a folder in pages like [id] and redirect to it following this syntax
Router.push(`/sth/sth/${sth.id}`);
this configuration of redirects in nextjs might come in handy when you need to custom your links
i should also warn you migrating an existing project to nextjs requires a lot of work and a lot of changes to the project.

ASP.NET core razor pages localization for inputmodel inside pagemodel

I have created a Resources folder inside my ASP.NET Core solution and have created resx files for translations. I have resx files for models, pages and controllers. I would like to know where to put a resx file inside the Resources folder when there is a inputmodel inside a pagemodel?
This is an old question and maybe not relevant now, but I just had the same problem and was able to figure it out, so I'll add what worked for me.
It is really just a minor detail. If we want the resource for the page model, we would have Resources\Pages\IndexModel.en.resx, for a class that's internal to that page model, we add a +InnerModel, ending up with Resources\Pages\IndexModel+InnerModel.en.resx
I created a GitHub repository with a working sample here -> https://github.com/joaofbantunes/AspNetCoreRazorPagesInnerModelLocalizationSample
lets assume that we have a razor page under pages folder as below:
Pages/MyPage.cshtml
and its model page:
Pages/MyPage.cshtml.cs
your resource folder is located in the Project root beside Pages folder as below:
Project Root
-- Pages
-- Resources
MyPages input model by default is:
MyPageModel
Naming of the resource files deffers according to view localization setup in your startup.cs file,
Dotted naming :
if you used per view resource files with "suffix" option:
services.AddMvc()
.SetCompatibilityVersion(CompatibilityVersion.Version_2_1)
.AddViewLocalization(LanguageViewLocationExpanderFormat.Suffix);
then you have to follow dotted naming for the resource files:
Resources/Pages.MyPage.en-US.resx // localization resource for view
Resources/Pages.MyPageModel.en-US.resx // localization resource for input model
Subfolder naming
if you used per view resource files with "Subfolder" option:
services.AddMvc()
.SetCompatibilityVersion(CompatibilityVersion.Version_2_1)
.AddViewLocalization(LanguageViewLocationExpanderFormat.SubFolder);
then you have to create folder structure for resource files similar to the view folder strcuture:
Resources/Pages/MyPage.en-US.resx // localization resource for view
Resources/Pages/MyPageModel.en-US.resx // localization resource for input model
There is another option, which is using shared resource files, instead of creating one resource per view per language you may create only one resource file for all views per language, if you are intereseted in using shared resources you may visited this blog page: http://www.ziyad.info/en/articles/10-Developing_Multicultural_Web_Application

Polymer build compress

I am generating a component application in Polymer .. as a template I used the following: https://github.com/PolymerLabs/start-polymer3. Everything works excellent, I uploaded it to firebase, the point is that I want to make 'polymer build' generate the structure of folders: build / s6-unbundled, along with other folders like node_modules and my custom script, if you know some way to compress all the scripts generated in the build into a single file. Since the components I want to insert in third-party sites but I want to load only one js file and not have to load all what the polymer generates. I've done this with vue-custom.component but I do not know how to Polymer. I appreciate your help.