Can I change Angular-Fullstack's automatic naming conventions? - node.js

When I use generator-angular-fullstack's API to build routes, controllers, directives, whathaveyou, it appends naming conventions I don't like. For instance for all the module declarations it appends "App", and I'd prefer to not have "App" appended to my app name. Also, it uses "Ctrl" instead of "Controller", and so on.
I'm not seeing a json file that controls this behavior in my app or my angular-fullstack npm files. There's a good chance I'm overlooking something or not even looking in the right place.
Thanks!

You cannot edit the templates directly. You can either go back and rename them, or generate your own templates by replacing the routing through your .yo-rc.json file. It's located in the root folder of the project in all angular-fullstack apps unless removed.
It looks like angular-fullstack uses the generator-ng-component node module for the templates, here's a link to the github repo for controller template specifically. You could also make your own, fork it, then use it as your own generator.
https://github.com/DaftMonk/generator-ng-component/blob/master/templates/controller/name.controller.js

Related

How to aliasing Preact with Webpack?

Preact guide says
To alias any package in webpack, you need to add the resolve.alias section to your config. Depending on the configuration you're using, this section may already be present, but missing the aliases for Preact.
But using any of the official templates (default, typescript, material web components, etc...) doesn't generate any webpack.config.js file and preact has no eject command like react to access the full project configuration.
So, few things:
Firstly, Preact and Preact-CLI are two separate items.
You're quoting the section from our docs labeled "Integrating into an existing pipeline". This means adding Preact to an existing React application of yours, but, if you're using one of our templates, then this is a new project, not an existing one.
preact has no eject command like react to access the full project configuration.
There is no way to "eject" React. What you're referring to is the build tool called "Create React App".
We do allow for full configuration of the Webpack config with a preact.config.js. With this, you can edit any parts of the config that you'd like: change plugin options, add loaders, remove plugins, etc., without owning the configuration yourself. You can just comment out your changes in your config and you're back to the default config.
We believe CRA's "eject" is a poor API and therefore don't match it.

Correct Vue application skeleton

I am very new to vue and I have followed some guideline to use it.
In the first, that is here the project was structure in this way:
1) There is a src directory, and inside I have : assets,components,route,services and view.
2) There is also a server directory and inside I have : src and models directory.
But, In another guide, this one I found this skeleton:
1) There is only a src directory.
Which is the best way and Why is better to use one of this structure?
Thank you
The recommended way is for you to create a project with Vue CLI, which will end up creating the structure you mentioned first.
In a very simple project you can put all just into a simple src directory, but that is off topic here on Stackoverflow, because it is an opinion; there is no such thing as a single correct directory structure.
Don't get hung up on this. If you are new, and you're not aware of having special requirements, start with the templates in vue cli. They are a good common standard. If/when you want to branch out, do so for a reason. Here are some good project templates with various specialisations (enterprise, OAuth, etc)

Getting the path of a node module in a view

I'm a beginner using NodeJS. I'm using a plugin for video-js called videojs-playlist. The docs say to include it like this:
<script src="path/to/video.js/dist/video.js"></script>
<script src="path/to/videojs-playlist/dist/videojs-playlist.js"></script>
What exactly is the path/to supposed to be if not root/node_modules or something like that? How am I supposed to access those files from an ejs view? I have installed both video-js and videojs-playlist using npm.
Right now I get redirect errors on my page because it's not finding the file from the paths I've tried.
If the path doesn't have a / at the beginning, then the path is relative to the file the <script> tag is in; otherwise, it is relative to the site root -- which may mean different things depending on if/how you are bundling/deploying your javascript.
For a simple case, if you have the script tags in an index.html, and you copied video.js to the same directory as index.html, you would reference by:
<script src="video.js">
If you are using Node to test things out on your personal machine, you could reference a file relative to your HTML file and node_modules directory; however, this wouldn't really be the best in the context of deploying and managing a real application.
Node gives you require() to import modules from dependencies you've installed without needing to specify their exact location and directory structure, but it looks like this particular plugin may not have given you that convenience here.
It looks like you are in need of a bundler. One widely-used and well-documented bundler is webpack, but there are others such as parcel and FuseBox. These can all serve your needs.
These tools are most likely what the videojs-playlist README on GitHub is referring to when they say:
Include videojs-playlist on your website using the tool(s) of your choice.
Among other features, these tools can take a file from one of your node_modules dependencies, and "bundle" relative your javascript application (however you desire), so that you don't have to carry around some pre-installed giant node_modules directory everywhere with you -- you only take what you need with you and structure it the way you want.

File specific TypeScript annotation for environment, like browser or node

I'm trying to write a universal React.js application using TypeScript and if possible it would like to somehow annotate certain TypeScript files in such a way that a file is understood to be running inside a browser context or Node.js context explicitly. So that any attempt to use browser APIs from within Node.js environment would fail, and vice versa. How can I do that?
Right now the files reside in the same directory and maybe that the problem because I cannot have multiple tsconfig files but if that is the only solution I guess I have to do it that way.
Each project described by a tsconfig.json file has a single set of visible declarations; there's no way to have different declarations visible in different files in the same project. You can put a <reference> directive in a specific file, but the directive will affect the entire project. So to enforce what you want using the regular type checker, you'll need to use multiple tsconfig.json files. There may be other approaches such as using the tslint "ban" rule to ban all APIs from one environment in a specific file, but I doubt they will be practical.

How to you reference a required script that is bundled?

I'm working with the Hot Towel SPA template and I'm trying to add in some data that I want to get from breeze. I have the breeze nuget package installed and the breeze script files are in the scripts folder of the site.
I can reference it by using the actual file name like the following:
define(['durandal/app', '../scripts/breeze.min.js'], function (app, breeze) {
...
});
However, this will break when my site is running in release mode and the script is actually bundled. Plus, it is really ugly and feels like a hack to put the full name in there.
What is the correct way to do this?
By default Durandal loads external libraries via normal script calls not via requirejs. Same is true for HotTowel.
e.g. https://github.com/BlueSpire/Durandal/blob/master/index.html#L31
or if your platform supports it via bundling
https://github.com/johnpapa/PluralsightSpaJumpStartFinal/blob/master/SPAJumpStart/App_Start/BundleConfig.cs#L18
Simply load breeze before requiring main.js and you should be good to go.

Resources