I'm not sure on how to serve static assets with Node.
I have Bourbon-Neat installed as a dependancy via npm install -g neat.
The neat forder is located in my project folder.
#import "neat"; leads to 404 error on serverip:8000/neat
Giving an absolute path neat/_neat.js does not help as well.
I can spin up Nginx and serve neat folder via it, but I thought the idea of npm install'ing would be to make those files available natively by Node.
You can serve static assets with Node. The easiest way is to write a Node program that uses the Express.js framework. Using Express.js you can configure that a directory is to be served as static assets.
app.use('/static', express.static('./your/directory'));
For the rest, I think a good investment would be to research how the build process works for generating css files using preprocessors in development time such as SASS and how that differs from actually serving them in production.
Related
Asked this in the internal WeltPixel forum, with no luck... so I try here:
Working on a large multisite with several websites, all based on child themes of WeltPixel Pearl
I'm making changes in multiple less files. When I'm working locally I have grunt running to generate .less / .css and .map files so I can see in the browser which less files I have to edit.
This workflow is from Magento docs, using grunt less and grunt watch to automagically generate .css whenever I saved a .less file, and it worked perfect - I thought...
But now I discover that if I generate css with :
bin/magento weltpixel:less:generate
and
bin/magento weltpixel:css:generate --store=STORECODE
AFTER i run grunt less, then I have other results, and the map files aren't generated. In the browser I only see styles-m.css and styles-l.css, so it's a mess ...
Whenever we publish for production, the last step is to run weltpixel:css:generate which is explaining why I had some incongruences between my local platform and production server.
So, I'm asking for : how do you build a development workflow that will let you modify some .less, generate .css and build corresponding .map files, so you can see in development tools in the browser which less files you should modify?
Any ideas?
/best regards
I'm working on a plugin for Moodle that involves a lot of compiled JavaScript. Because of the complexity of the plugin, I'm writing it in TypeScript and compiling it with Webpack. This is all working fine.
However, Moodle has built-in Grunt tasks to help with JavaScript deployment, including uglifying the code. My compiled code is already minified, so this step isn't necessary. For some reason, putting the compiled code through the uglifier creates errors in the browser that aren't present with the non-uglified version. Because of this, I'm hoping to find some way to override the Grunt task.
The Grunt task is pretty simple; it uses a glob to find all javascript files in the various plugin folders in Moodle. I don't want to modify the top-level Gruntfile so that others can use this plugin without having to touch the core Moodle files. Is there a way I can create a Gruntfile (or some other flag) inside my plugin's directory that signals the parent Gruntfile to ignore my compiled file?
Unfortunately, removing my file from the watched folder is not an option. In development mode, Moodle serves the pre-compiled "src" script, so I need to keep the file there for development purposes (otherwise, I need to manually purge the cache each time I want to load the updated file).
Here's a general overview of what's happening:
Directory structure:
public (main Moodle directory)
Gruntfile.js
local
my-plugin
amd
src
my-webpack-compiled-plugin.js
build
my-webpack-compiled-plugin.min.js
my-webpack-compiled-plugin.js is the file output by Webpack (the file I don't want to be uglified)
The Gruntfile.js contains, amongst other things, this:
amd: {
files: ['**/amd/src/**/*.js'],
tasks: ['amd']
}
The amd task is where the files get uglified.
So I'm hoping to find some way to exclude local/my-plugin/amd/src/my-webpack-compiled-plugin.js from getting to the amd task from within the /local/my-plugin directory to keep my plugin self-contained.
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.
Ok I'm new to Polymer, after seeing the main page and Google IO 2016 video, I wanted to try it out, and right now I created a basic web application with it.
I managed to get it build and running it through the "polymer serve" command, but now that I want to release it to a production environment (I have an nginx cluster), how do I build the application to just a bunch of static website files?
I executed "polymer build" and I see the build folder and it contains 2 folders: bundled and unbundled, and inside them there are the bower_components, src and test folders as well as other stuff for running it through "polymer serve" but there's not a build/dist of build/static folder that I can copy into nginx so the application is served through it.
BTW, what I mean about a dist folder is without a readme, bower.json, test, bower_components, etc. just the pure needed HTML, CSS, JS, etc files that need to be served through nginx (or any other web server) as static file web content.
I went through the documentation but there's no details on how to do such task.
Any suggestions on how to build a static content folder for serving my polymer web app through nginx?
Thanks!
As of Polymer-CLI v0.11.0, there's no built-in way to filter out files from the bundle, but it's a requested feature. Also, the build output currently includes extraneous files (a bug), such as the test directory.
As an alternative, you could use Polymer Starter Kit 1.3.0, whose dist folder doesn't include the extra files (although it does include required bower_components as-is).
I'm currently using the built-in BundleConfigs which work great locally and deployed, but I'd like to move all my static assets to a CDN. I know the bundle syntax allows you to specify a CDN path which will work, but does anyone have a good solution to keep the BundleConfigs in sync with your deployment scripts -- which will ultimately handle the concat/minify/copy of your statics to the CDN?
I'm currently looking into Grunt to concat/minify my styles/scrips, but this will cause me to have to manage all my bundles in my solution's BundleConfig.cs, and then again in my Gruntfile.js. Not ideal...
Thoughts or suggestions? Thanks!
If you're going to use Grunt for bundling and minification, then I don't think you need to use ASP.NET Web Optimization framework. Why to use both? Just insert links to your bundled app.css and app.js files on your page and you're all set. You can also use #if ... statements to include different versions of your files (development vs production).
Also, take a look at Gulp.js - a newer alternative to Grunt, and this project template, which already has some basic Gulp.js configuration in place: ASP.NET Solution Template
A couple of Gulp.js plugins which can help with a CDN:
gulp-s3 - Uploads your static files to Amazon S3 during a build
gulp-google-cdn - Replaces references to 3rd party libraries with Gogole CDN links
After Gulp.js is configured via gulpfile.js file, you can run:
gulp build --production
..in order to build your HTML/LESS/JS files and publish them to Amazon S3 or some other CDN.