I want to build a website with Express and Angular (no SQL) so I started wondering what is the right structure for this kind of app.
For Angular there is a directory structre I really like from here:
app/
----- shared/ // acts as reusable components or partials of our site
---------- sidebar/
--------------- sidebarDirective.js
--------------- sidebarView.html
---------- article/
--------------- articleDirective.js
--------------- articleView.html
----- components/ // each component is treated as a mini Angular app
---------- home/
--------------- homeController.js
--------------- homeService.js
--------------- homeView.html
---------- blog/
--------------- blogController.js
--------------- blogService.js
--------------- blogView.html
----- app.module.js
----- app.routes.js
assets/
----- img/ // Images and icons for your app
----- css/ // All styles and style related files (SCSS or LESS files)
----- js/ // JavaScript files written for your app that are not for angular
----- libs/ // Third-party libraries such as jQuery, Moment, Underscore, etc.
index.html
For Express I don't really no where it should be because I have no a lot of experience with Express, where can I put express with the correct structure.
If your express backend acts as an api server, you can simply put it with app's parent folder side by side, i.e.
backend/
----gruntfile.js
----express.js
----router/
----package.json
----node_modules/
frontend/
----app/
Related
)
I'm trying to create my own theme for hugo.io. So far, everything works fine. My only problem is, that I can't get hugo to render the custom layouts for single section content.
For posts this works fine:
The index.html gets called correctly
The single.html inside the "layouts/posts" gets called correctly
For tutorials, the list layout works correctly
The permalinks for all files and lists work correctly
The problem:
* For tutorials, the single layout doesn't call the "layouts/tutorials/single.html" layout. Instead it uses "layouts/_default/single.html"
I tried the following:
add type= "tutorial" preface setting to all tutorial .md files
add layout= "tutorial" preface setting to all tutorial .md files
add a "tutorial.html" file inside the "layouts/_default" folder (also tried naming it "tutorials.html)
add a "tutorial.html" file inside the "layouts" folder (same as above)
sadly, none of this works
My setup of content:
content
|__ posts
|__ new_post.md
|__ tutorials
|__ new-tutorial.md
My setup of layouts (inside my theme folder):
layouts
|__ _default
|__ list.html
|__ single.html
|__ posts
|__ list.html
|__ single.html
|__ tutorials
|__ list.html
|__ single.html
|__index.html
My single tutorial content (new-tutorial.md):
+++
title = "My new Tutorial"
date: 2019-10-04T14:10:46+02:00
draft: false
type: tutorial
layout: tutorial
+++
# Custom Content Headline
There is no error message from hugo.
I expect hugo to open the page "http://localhost:1313/tutorials/new-tutorial/ with the layout that lies in the file "layouts/tutorials/single.html"
You should not specify type: tutorial and type:tutorial in new-tutorial.md in your case.
Hugo will use layouts/tutorials/single.html by default for tutorial section, see https://gohugo.io/templates/lookup-order/#examples-layout-lookup-for-regular-pages
Final result for new-tutorial.md will look like
+++
title = "My new Tutorial"
date: 2019-10-04T14:10:46+02:00
draft: false
+++
# Custom Content Headline
Already solved the issue, the problem is in the type definition. Hugo by default gives the elements inside the tutorials folder, the type tutorials, if you change it to tutorial, you must make a subfolder with the tutorial htmls, that are the new type.
layouts
|__ _default
|__ list.html
|__ single.html
|__ posts
|__ list.html
|__ single.html
|__ tutorials
|__ list.html
|__ single.html
|__ tutorial
|__ list.html
|__ single.html
|__index.html
like it says in the documentation
In case I am not making my self clear, you can read about it here and here
Basically, I have springboot application serving my index.html and other static JS files which includes(runtime, vendor, main) chunks created during the production build by Webpack. How do I set cache-control settings for index.html and chunks separately so that index.html won't be cached and chunks will be cached on the client-side? Currently, I have my resources under static folder like the following:
├── static
│ ├── index.html
| |-- bundles
│ │ ├── main.js
│ │ ├── vendors.js
│ │ ├── runtime.js
`
Basically, I am aiming for long-term caching of static assets on the client-side.
I interpret your question as asking how you can control this in Spring.
I think the better way to achieve what you want is to let Webpack output the different chunk-names so that they are cached for a long time (or until you deploy a new version of a chunk), not by specifically setting cache related headers for each filename.
The Webpack caching documentation recommends outputting the different chunk filenames to also include the contenthash.
output: {
path: path.join(__dirname, "build"),
filename: "bundle.[contenthash].js",
}
This will name your current bundle.js to something like bundle.7b4c86b268840bec8c4d.js. The first time a browser visits your site it will cache that chunk for a long time, typically a year but it depends on your configuration.
When you make changes to whatever code goes into bundle.[contenthash].js, the value of contenthash will change and the browser will cache that new version of your site/bundle since the filename doesn't match the cached bundle filename any more.
For more information, please refer to the aforementioned Webpack caching documentation
I'm working on a Django app and using angular as frontend. I want to create a s.p.a. using routes. But I'm unable to access the templates, because they are in templates folder. My directory structure is like :
root
|-- templates
| |-- index.html
| |-- view1.html
| |-- view2.html
|-- static
|-- app.js
|-- angular.js
|-- angular-route.js
I'm a newbie in angularjs, so pls be descriptive in your answer's.
I can't change the directory structure,
Or if I'm working with render to string then how can I load the view with a api call which return me the html on page load?
Django templates != Angular templates. Don't mix them. Angular templates are static files from Django's point of view; keep them in the static folder.
I would suggest separating your Angular application from your Django application if you can.
First, if you haven't done so, learn about REST API endpoints and use Django REST framework or a similar library to surface your application's data via REST API endpoints. This allows you to get your data by visiting URL's on your Django development server without it having to be served in through the Django templating engine, which is what I'm assuming you're doing at the moment. Something like:
http://localhost:8000/api/users/
Will return a list of users that looks something like:
[{
username: 'Bob'
email: 'bob#gmail.com'
}, {
username: 'George',
email: 'george#gmail.com'
}]
Then you can serve up your angular application as a static file through another development server using something like http-server through node.
Now your angular application can be served up through http://localhost:8080/ and your django application can be served up through http://localhost:8000/. Your data for your angular application is now accessed strictly through HTTP calls, which decouples the previously intertwined and mangled frameworks.
This allows you to use angular's templating engine instead of trying to keep track of where your template files are being served through your Django server. So your folder structure for angular can look something like:
app
|-- index.html (includes your main angular application)
|-- templates/ (templates here)
|-- app/ (app files here)
This is just an example though, a good source on how to write and organize your application, which I find useful, can be found at https://github.com/johnpapa/angular-styleguide.
Let me know if you have anymore questions!
So my directory structure looks something like this:
\Project-Dir\
|- lib\
| |- flask\
| |- ...
|- module1_dir\
| |- __init__.py
| |- app.yaml
| |- app.py
| |- ...
|- module2_dir\
| |- __init__.py
| |- app.yaml
| |- app.py
| |- ...
|- ...
Inside app.py
sys.path.insert(0, os.path.abspath(os.path.join(os.path.dirname(__file__), '../lib')))
I have two modules inside the same root directory. They are both deployed to App Engine together. They also share the same libraries. The libraries are all pretty beefy so I'm trying to place them in a shared directory (lib).
I'm running dev_appserver.py from \Project-Dir\ and passing the two .yamls. My sys.path is set up fine to include the lib\ directory. And yet the sandbox seems to stubbornly insist that the libraries in lib\ just don't exist.
I'm sure I'm just missing something small like a config change somewhere. Or does App Engine really just flat-out not support such a setup?
EDIT: The imports work fine when I run it outside of dev_appserver.py.
I spoke to a Google support engineer, after facing the same problem. Unfortunately, GAE does not support this kind of setup.
When you use the Modules API, module 1 and module 2 run inside separate Python virtual environments as separate self-contained instances. They cannot 'see' the contents of their parent directory. Modifying sys.path doesn't make a difference.
There are two solutions:
(a) Duplicate your 'lib' folder by placing it inside both 'module1_dir' and 'module2_dir'.
(b) Place the module files directly in the root directory.
Here's my issue:
My project is mainly contained in index.html, with ui-router placing the various pages in a <div ui-view></div> section.
In one my other pages, let's call it page1, I have an ng-include to a partial in the same subdirectory. However, when I try to include this partial using
<div ng-include="'page1Partial.html'"</div>
I get a console error that
GET http://localhost/myProj/v3/myproj/app/index/page1Partial.html 404
This is obviously because ui-router moved my page into index.html and it's looking for the ng-include based on that directory.
I really don't want to move the partial to the index folder, as that structurally makes no sense my project. I also, don't want to type out a whole hardcoded path to this same directory (which could potentially change in the future). I want to be able to refer to this partial in a relative, simple and safe way.
What is the best way to efficiently and quickly manage this issue?
I've included what my file structure looks like:
myproj
|-- app
| |-- index
| | |-- index.html
| | |-- index.js
| |-- page1
| | |-- page1.html
| | |-- page1.js
| | |-- page1Partial.html
| |-- page2
|-- common
| |-- resources
| | |-- page1resources.js
| | |-- page2resources.js
If your project is in fact a single-page app (user opens index.html and all other pages are dynamically included using ui-router), you'd save yourself much hassle by simply putting your single point of access (index.html) right in the root folder of your application. All relative paths would then have the root folder as context.
When creating such single-page applications, it is quite common to create index.html automatically during build (see index task in Gruntfile.js in ngBoilerplate).
If you cannot (or don't want to) put your index.html in your root folder, you could just rewrite URLs (in your server) to make it appear to be there. In Apache, you could use mod_rewrite for that:
RewriteEngine on
RewriteRule ^/$ /app/index/index.html [QSA]
(you'd then access your app at http://localhost/myproj/.)