Develop Reference

Snowpack config only works for dev or build, but not both

I have a snowpack project with the following folder structure:
build : contains the built project
src : contains the source files
node_modules
package.json
snowpack.config.js
I set the following config:
// Snowpack Configuration File
module.exports = {
mount: {
"src": "/",
}
};
This works when I use snowpack build: the files from src are neatly placed in the build folder and I can access it using the url http://localhost/myproject/build/index.html on my computer.
Problem: when I use snowpack dev, for some reason snowpack tries to find the build folder inside the src folder ?!?
404 ERROR /Users/oldhank/Sites/basics-snowpack/src/build/_snowpack/pkg/#tensorflow/tfjs
If I remove the config file the dev works too, but then I need to have all my project files in the root directory, which looks ugly?
How can I get both the dev and build commands working with a src and build folder?

Hope this helps anyone trying to dev + build + deploy (gh-pages) Snowpack apps:
https://github.com/jgrizou/snowpack-boilerplate
Above link contains a boilerplate for Snowpack app.

set directory for node_modules within gruntfile.js

I would like to set the path of the node_modules directory within the gruntfile.js. I would like to have one central node_module directory for all my grunt projects.
Is it possible to set the path for an external node_module directory?
Current setup (which works)
projekt1
--gruntfile.js
--package.json
--node_modules
projekt2
--gruntfile.js
--package.json
--node_modules
Set up which I would like to have
node_modules
project1
--gruntfile.js
--package.json
project2
--gruntfile.js
--package.json

You can.... I have been using this setup without any issues. In each of your project Gruntfile.js files, simply set the base to one directory up like so:
Given a folder structure like this:
node_modules
project1
app.js
Gruntfile.js
package.json
Your Gruntfile.js may look something like this
module.exports = function(grunt) {
// Tell grunt where to find node_modules
// This is the line you're looking for
grunt.file.setBase('../');
// Your normal grunt config
grunt.initConfig({
// Your package.json file is now relative to the parent folder
pkg: grunt.file.readJSON('project1/package.json'),
// I use webpack, your tasks will probably be different
webpack: {
options: {},
build: {
// Paths are now resolved from the upper folder
// since we set the base path to one level up
entry: './project1/app.js',
output: {
// Again, the path must be relative to the parent folder
path: 'project1',
filename: 'app.min.js'
}
}
}
// etc...
});
// Load tasks...
}
Once you setBase('../') you'll need to make sure that all your file paths are resolved correctly since your base path has been changed to 1 level up.
A warning... if you publish or distribute your package, Grunt tasks won't work for those who download it because they more than likely won't have the same setup with node_modules 1 level up. And even if they do, they may not name the project1 folder the same

requirejs optimizer - need help optimizing our application

We have a large scale javascript application that we are trying to concatenate and minify using grunt-contrib-requirejs. We use the Aura framework. We use bower to pull in dependencies from other repositories into our main application.
Here is our app structure
- app/
|
|_ main.js
|_ index.html
|_ css
|_ bower_components/
|_ core/
|_ widget1/
|_ main.js
|_ views/
|_ models/
|_ widget2/
|_ extension1/
|_ extension2/
|_ other third party libraries, etc
- Gruntfile.js
- bower.json
main.js:
requirejs.config({
shim: {
...
},
paths: {
'core': 'bower_components/core/app/main',
'aura': 'bower_components/aura/dist/',
'jquery': 'bower_components/jquery/jquery',
'backbone': ...,
... lots of other paths
}
});
define(['core', 'jquery', 'jqueryui'], function(core, $) {
// Here we start Aura, which finds our extensions and widgets in
// bower_components
});
Our current requirejs task config:
requirejs: {
compile: {
options: {
mainConfigFile: 'app/main.js',
name: 'main',
include: ['bower_components/widget1/main', 'bower_components/widget2/main',
'bower_components/extension1/main', 'bower_components/extension2/main'],
exclude: ['jquery'],
insertRequire: ['main'],
out: 'dist/app.js'
}
}
}
This concats our app/main and its dependencies, but when we try to run it, we get errors like:
GET http://www.my-machine:8080/bower_components/underscore/underscore.js 404 (Not Found)
even though underscore is a dependency of many of the widgets we include.
We have extensively tried different options in the r.js examples, and read through many stackover flow issues trying to find an answer.
We want advice on how to build this into one minified file with this structure:
UPDATE #2: Correct file structure
- dist/
|_ index.html // copied using grunt copy
|_ css // copied using grunt copy
|_ app.js // Built with grunt requirejs
UPDATE
We have included underscore in our shim which fixed the above error, but we're still getting another error:
Failed to load resource: the server responded with a status of 404 (Not Found)
http://my-machine.com:8080/bower_components/core/app/main.js
This is included in the minimized file so I don't understand why it can't find that file:
define("bower_components/core/app/main.js", ["aura/aura", "bootstrap"], function(){
...
});
UPDATE #3
The define above came from the file generated by the optimization tool! The original define for that module, core/app/main.js, looks like:
define(['aura', 'bootstrap'], function(Aura) {
...
});

You mention having this in your optimized file:
define("bower_components/core/app/main.js", ["aura/aura", "bootstrap"], function(){
...
});
But this does not make sense. If I reproduce a structure similar to what you show in your question and run an optimization on it then the file located at bower_components/core/app/main.js is optimized as:
define("core", ...
because it is known as core to the rest of your application due to the paths setting 'core': 'bower_components/core/app/main'.
I can reproduce the incorrect module name if I add 'bower_components/core/app/main.js' to the include setting in the build configuration. When I add this name to the include list, I also get the loading error you mentioned. Make sure that your include list does not contain this name, and make sure that there is nothing anywhere which lists 'bower_components/core/app/main.js' as a dependency. This name should not appear in any define or require call.

A couple of considerations first:
First of all, you should avoid defining module with a name. The name is to be generated by the optimization tool normally. Please read here: http://requirejs.org/docs/api.html#modulename
Second, you should understand what the baseUrl is and when it's used to located resources. The baseUrl seems to be "app/" in your case although you have not defined it explicitly. You should read this also:
http://requirejs.org/docs/api.html#config-baseUrl
So if you use the ".js" extension, then the baseUrl won't be taken into account.
Now what you should try:
To start with, remove the first argument "bower_components/core/app/main.js" from define function. Then you should refer to this module by auto-generated module id that will be a path relative to the baseUrl without ".js" extension.

RequireJS Config mapping whole directories

Is it possible to map a whole directory the node_modules directory for example to src/lib/ in the require config?
Sample Project:
project/
project/node_modules
project/src/
project/src/lib/

In RequireJS you actually can configure paths that points to a folder. And, you can name your path whatever you want. For example, if you have a folder named node_modules and you have some libs in there including jquery, you can configure a path like
require.config({
paths: {
'lib' : '/path_to_node_module_folder'
}
});
and later in your module you can require jquery like
define(['lib/jquery'], function($){
....
});

Using r.js with Angular and Require

I am having issues setting up r.js when using require in my angular application. I am new to using AMD so it may be an easy fix. Unforunately the directory structure must remain as is because of the requirement of ability to add more clients using the same Default components.
The error I get is that it can't find the controller dependencies. It is triyng to reference them from Client#1/Directory_For_Prod_Packs/Angular/Default/_Controllers/.js. So essentially it is adding the whole absolute path at the end of where the build file is at, or at least that what it seems like to me. Any help would be amazing. Essentially I'd just like to either have one pack of all my directives, services, controllers, etc. Or packs of controllers.js then directives.js and so forth.
Here is my directory structure.
Angular
Lib
angular.js
Default
Controllers
_Controllers.js //pack of controllers
.js //all the separate Controllers
Directives
_Directives.js
.js
Client#1
main.js //require config
app.js
build.js // r.js build config
And this is my build.js for r.js
({
baseUrl: '../../lib/Angular',
dir: "../../Client#1/ProductionBuild",
paths: {
"controllers": '../../Default/_Controllers/_Controllers',
},
modules: [
{
name: "controllers"
}
]
})
And finally this is my _Controller.js which
define(['angular',
'../../Default/_Controllers/controller1.js',
'../../Default/_Controllers/controller2.js'],
function(angular) {
'use strict';
var dependencies = ['controller1',
'controller2',];
angular.module('app.controllers', dependencies);
}
);

I'm not sure what exactly is the problem (the directory structure and the ../.. seem not to match, though I may be mistaken), but try setting the build.js properties as:
baseUrl: The folder that contains the scripts, relative to the HTML page that loads them, not relative to build.js
dir: Build output folder, relative to build.js
appDir: Application folder. It probably contains an index.html that bootstraps the scripts of your application. The folder pointed to by the baseUrl configuration property must be under this! And this is relative to build.js.
Take extra care about baseUrl, those ../.. look suspicious. It is relative to the index.html, not build.js.