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).
Related
I am using Nuxt.js for my web applications but never used the full static generator until now. My CI/CD pipeline builds and deploys a docker image containing of an nginx image with the static generated Nuxt.js app. My problem now is that I can not figure out how to use and load an app configuration file. Of course I could define all environment variables (like API_URL) during the build process but then i would have to separate images for each environment which would be unfortune.
My approach that I have in mind would be creating a config.json file and maybe having nginx deal with that but how can I tell my web application where he should look for the settings file?
My guess is that maybe people using webpack have come around this problem and know how to deal with it.
I have tried to look into this before.
The TLDR is that you cannot have on-runtime variables for the target: static build, especially with the way how some modules are made.
More info on this Github issue: https://github.com/nuxt/nuxt.js/issues/5100
So yeah, it comes down to have some dynamic webpack configs via your CI/CD, this is how my team handles it at least.
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.
I have been working through the Meteor Tutorial and have created my first project in my workspace.
I do have the list of files as described on the first "Creating an app" page; however, if I reference the Application structure | Meteor Guide, they are showing more than just the two client and server folders.
Are the folders described in the Application Structure guide, a layout scheme that I need to create, or should the meteor create simple-todos command have build this out for the reader?
You can have more than client and server folders in a Meteor application. The simple-todos application just uses these two folders, but for more complicated apps your needs can call for a more complex structure.
Before Meteor 1.3 the file loading of Meteor was different. Then you had several other folders that had special functionality, like lib, private, public. From 1.3 this has changed, and now we only have three folders: imports, client and server.
Anything placed inside the imports folder is not loaded by Meteor. Here you put your application code, and then you import it from anywhere outside this folder. This ensures that Meteor only bundles the code that you intentionally state that you will be using. This way you can write code that is not bundled in the app before it is tested and ready for use.
This is explained in the guide:
To fully use the module system and ensure that our code only runs when
we ask it to, we recommend that all of your application code should be
placed inside the imports/ directory. This means that the Meteor build
system will only bundle and include that file if it is referenced from
another file using an import.
So I'm playing around with MVC6, and I've added bower.json & grunt.json, I've created my grunt tasks for generating my jQuery & bootstrap.css and its all sitting in the wwwroot folder as i expected.
But what about things like my site.css & my main.js files, the files that I will add to for the project over time.
What convention are people using when choosing a directory for this stuff?
Are we to add a Content folder and drop it in?
Is there something I'm missing, that i should also be using Grunt / bower for?
I do have app and vendor folders outside wwwroot.
In vendor, I customize libraries like bootstrap, themes.
In app I have my own css, less and js files for the application.
I also have an asset path inside app for anything that needs to be copied (folder font shown in the screenshot)
Then I use the opinionated really easy to use and way better than grunt or gulp tool: brunch.
With this simple config, I get sourcemaps, concat, jshint, and with --production also uglify, minify, csso.
Adding anything else to the pipeline is simple as installing a brunch-plugin, so I recommend to also check http://brunch.io/ out.
Any static files (.css, .js) should be added directly into the wwwroot path (e.g. wwwroot/scripts, wwwroot/css). Anything that will be compiled into static files (.ts, .less) should be put into an Assets directory (or whatever name you like) in your project and output into the wwwroot path during compilation (generally configured through grunt compilation tasks).
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.