config.js vs preview.js for storybook? - storybook

On the storybook website, they describe customizing your configuration using files named preview.js and main.js.
At the company I work at, it seems like the .storybook directory seems to contain a bunch of files with other names, like a webpack.config.js or even just config.js.
Does it not matter what you name the files in the .storybook directory? Does it just run all of them arbitrarily?

The file names very much matter. What is happening is that your project is using the older standard (though it's still compatible) and the file names have been changed since Storybook 5.3. I understand it can be confusing, but the information available in the migration guide should help.

Related

Easy way to convert SASS into CSS?

I am using a CSS framework, which has documentation for user-created extensions. But these extensions are all written in SASS files on GitHub.
Now this framework is only a single CSS file. But for the extensions they are requiring to use NPM, or clone the entire GitHub project, and start using SASS commands, which I'm unfamiliar with.
Is it possible that I keep the current configuration: I.e. only have the main framework CSS file, and somehow convert each extension SASS file to CSS file and add that to my /css folder? Or that's not possible?
**Edit: It's the Bulma CSS framework, and this is the link to the Extensions repository: Wikiki
If the number of files are not too much, you could convert them manually using an online sass compiler
SassMeiser is my goto choice for online Sass compilers.
Maybe if you could provide a link to the repo, we'll have more clarity on how we could deal with it.
Edit: I just went through the repo. They already have the .min.css file for each extension in dist dir. You're better off just downloading the .min.css file rather than converting it yourself. Remember, you need the .min.js files also for the extension to work.

Sass (LibSass) with Spring MVC and JAVA

I was planning to use Sass with my Spring-MVC application. From Sass-lang website I got this Maven LibSass Plugin. I have put it in my pom.xml
But I am really confused with what next?
The major doubts I have are:
Which directory I should keep my Sass files in?
How do I include them in my HTML files?
What should be the target dir?
As of now, if I keep directories as suggested by my plug-in, it crashes either eclipse or stalls maven clean and install goal execution. I very new to this concept. Do let me know if you need any other info.
Actually these are all up to you.
You can choose an arbitrary directory. Most probably you would not want to serve Sass files. Thus this directory should not be deployed. libsass examples use src/main/sass directory.
You should include the .css files created at the target directory manually. libsass does not handle this part. There is no automatic inclusion of the compiled .css files as in Ruby on Rails platform.
Target directory is arbitrary again. Remember the choice of directory depends on how you will refer to these files at views. For example if you will be manually referring them, most probably you'll want to specify a target directory that is actually deployed to application server, such as src/main/resources/css.

Preview Failed - Visual Studio will look for typescript files when publishing even when they are not included

I'd like to do the inverse of this question/answer:
How to include TypeScript files when publishing?
The thing is that I'm trying to publish an ASP.NET MVC 5 Project. Unfortunately the dreaded Visual Studio and the hungry Jack Typescript interpreter ignores any tsconfig.json file and decides to go deep down and look for any .ts file that is not accompanied by a .js. I have lots of npm packages nested down and some of them have uncompiled typescript files.
Funny thing is, that they are not included in the project (not even an exclamation mark). (I even checked for the .csproj and no files were found).
Is this a bug? How can I prevent this from happening? Using VS 2015.2 (Update 2).
I had a very similar issue. Publish kept failing because it couldn't find foo.js as it wasn't in the same directory as my ts/tsconfig files, even though outDir was set to another location. I don't know if it is a bug or not but I couldn't figure it out using the tsconfig. Instead, I was able to get things working by using the inbuilt TypeScript Build settings instead.
First, I deleted all tsconfig files from my project (I made sure I kept a backup just in case). The TypeScript Build was originally greyed out because I had the tsconfig files in my project.
Next, I created a new folder directly under Scripts to save the js files into.
I then went to Project Properties and selected the TypeScript Build tab. Under Output, I checked the Redirect JavaScript output to directory and browsed to the newly created folder. I repeated this for all build configurations.
Finally, I included the new folder in my project and then built. Folders and files which aren't included in the project can be seen as a ghost icon in the Solution Explorer if you have Show All Files icon selected. I think that if you have multiple TypeScript projects with their own tsconfigs, the file structures are replicated under the chosen output directory but I haven't tested it in many cases so I'm not certain.
Obviously I had to redirect my script bundles to the newly created js structure.
When I first followed this process, I got a few build errors mainly due to my own daft mistakes in my TypeScript code which I'd set the tsconfig to conveniently ignore. Another error was multiple references for objects, which I managed to fix by deleting the definitions files and making sure that the Generate declaration files option was unchecked in Typescript Build. Once I fixed those issues though, I was able to publish without that annoying error - happy days!

Basics of importing scripts in angular2 using nodejs and npm with ASp.net Core 1

Hi i just finished installing asp.net core1 so got introduced to npm , bower and nodejs after researching a lot i chose to go with angular2 .
now my problem is that i have never used gulp, grunt etc even though i know how it works and why to use it. there are lots of instructions on web to setup angular2 project with mvc6 but not explaining the thing which is new with mvc6.
anyways i dont want to get myself confused with gulp/grunt etc right now so i am just copying files from node_modules to my script folder and giving it path but it works almost for everything related to angular.
for eg.
import {anything} from 'angular2/core' or from RXjs etc(this import is from node_modules) and i have to give a path in my index files where i have copied all the files.
but when i try to include some plugins like ng2-select, ng2-bootstrap or toastr etc it doesnt work the way it should it throws errors.
my question is do i need to copy whole folder from node_modules to my script folder and then linq it or what , how it works?
Do I need to copy whole folder from node_modules to my script folder and then link it or what, how does this work?
I have an example in my blog post of what you should be doing in this situation. Ideally, you will use a gulpfile.js to orchestrate your desired file needs. For example, if you're looking for Angular2 it is rather simple. You create a gulpfile.js by adding a new item to your project. In that file you write some simple "tasks" that automate this move for you. You look in node_modules and move over anything that you need. For Angular2 I move over the following .js files (in this example):
var angularJs = [
'./node_modules/angular2/bundles/angular2.js',
'./node_modules/angular2/bundles/router.js',
'./node_modules/angular2/bundles/angular2-polyfills.js',
'./node_modules/angular2/bundles/http.js'
];
So to answer your question more directly, no. You do not need to copy the entire folder -- just the files that your application needs.

How to make Meteor ignore files?

Is there some specific folder in Meteor file structure which is simply ignored by Meteor? (meteor bundle and meteor deploy etc)
Or better yet: is there a kind of .meteorignore file where we can list files for Meteor to ignore?
There's no such file as .meteorignore yet.
Currently the only reliable way to hide a file from Meteor is to make it hidden (add a dot to the beginning of name). You can hide the whole directory, which is useful if you need specific filenames for things like Grunt tasks.
For example if you create a directory called .hammerTime, then Meteor can't touch this.
Update:
As of Meteor v1.5.2.1, there is support for a .meteorignore file. It works exactly the same as a .gitignore.
As of Meteor v1.5.2.1, there is support for a .meteorignore file. It works exactly the same as a .gitignore.
You can use them in any directory of your project and are fully integrated with the file watching system.

Resources