Brunch / npm and phoenix confuses the hell out of me. The paucity of concrete examples doesn't help. Maybe this question can shed a little light?
Here's my config at the mo'
npm: {
enabled: true,
styles: {
'material-design-lite': ['dist/material.min.css'],
'mdl-ext': ['lib/mdl-ext.css']
},
globals: {
material: 'material-design-lite'
}
}
Couple of questions. Whilst the mdl styles are working I'm not sure if the .js is being pulled through. How could I check?
mdl-ext css is getting pulled through but again not sure about the js. Also not sure how I would check. All feels a bit secret sauce.
Learnt some more about brunch and found the solution.
the default brunch-configuraton.js configuration comes with this
"joinTo: "js/app.js" uncommented by default. So, it does not contain
any regex to include the js files, and by consequence it includes all
of them
I just needed these 2 lines in my app.js file:
import 'material-design-lite/material';
import 'mdl-ext';
Things become a little trickier when bundling into multiple files e.g app.js and vendor.js. I'm still experimenting with that.
https://github.com/phoenixframework/phoenix/issues/1495
https://github.com/phoenixframework/phoenix/issues/1813
Related
I am using Nuxt in ssr: false mode and deploying my app to heroku following this guide.
Now I am using nuxt/pwa module which works perfectly fine when testing my app via npm run build && npm run start (production mode).
Also I noted this comment from the nuxt/pwa docu:
NOTE: If using ssr: false with production mode without nuxt generate,
you have to use modules instead of buildModules
which I configured correctly so my nuxt.config.js file looks like this:
ssr: false,
...
modules: [
...
'#nuxtjs/pwa'
],
pwa: {
manifest: {
name: 'XY App',
lang: 'de'
}
},
Now when the app is deployed to heroku and I turn my phone into flight-mode to simulate offline status, the app is not responding: "You're not connected to the internet" is showing up in the browser.
What do I do wrong here? I cannot see any misconfiguration but maybe I miss something from the PWA approach.
I'm not sure on how to configure it, but I know that the package itself do not allow a full offline mode by default. Looking at the documentation, it looks like Workbox is doing exactly that. It should be pretty easy to setup and enable a full service-worker + cached pages thanks to it IMO.
https://pwa.nuxtjs.org/workbox
It looks like the starting point is: yarn add #nuxtjs/workbox, then fine tuning the configuration!
PS: the rest of your configuration looks nice to me!
I'm trying to get the /rs/cors package to work with the latest Buffalo as Preware, which is supposed to work according to a recent blog post (https://blog.gobuffalo.io/buffalo-v0-9-4-released-5d2327a4742e), but the code snippet there doesn't seem to make sense. If I generate a new buffalo app as an API, and I look at adding the cors package, I start with:
app = buffalo.New(buffalo.Options{
Env: ENV,
SessionStore: sessions.Null{},
SessionName: "_creatorhub_session",
})
// Automatically redirect to SSL
app.Use(ssl.ForceSSL(secure.Options{
SSLRedirect: ENV == "production",
SSLProxyHeaders: map[string]string{"X-Forwarded-Proto": "https"},
}))
// Set the request content type to JSON
app.Use(middleware.SetContentType("application/json"))
I should obviously add something along the lines of "PreWares: []buffalo.PreWare{}," but it seems to want a HandlerFunc, which /rs/cors doesn't seem to return under normal use, so I'm failing to find the right combination to make these work properly together and I haven't found a working example.
Anyone out there have an example to share? Any ideas appreciated!
Finally figured it out, so I'll share the info here for anyone else. This is using Buffalo v0.10.1 and the https://github.com/rs/cors project. I dug in and found that I could set up the cors object with (using localhost for example):
c := cors.New(cors.Options{
AllowedOrigins: []string{"http://localhost:8080"},
AllowCredentials: true,
})
and then add it into the Buffalo instantiation by getting the Handler out of it:
app = buffalo.New(buffalo.Options{
Env: ENV,
SessionStore: sessions.Null{},
SessionName: "_creatorhub_session",
PreWares: []buffalo.PreWare{c.Handler},
})
That worked for me. The issue was that it was difficult to find documentation for what Buffalo wanted passed in to PreWare and matching it up with what could be provided by the cors package.
Hope this helps out someone else in the future!
I am almost done with upgrading my Rails3 app to Rails5; But I am facing a problem with assets pipelining and precompiling. We're using cdn as asset host.Now, What happens is that when I set config.assets.precompile to false in staging environment, the app doesn't load images from js.jsx files. At other places, the app is fetching the static assets (js,css,images) from the asset_host link that I've provided. But in some specific javascript files, The images is being pointed out to my app's domain like app.my_domain.com/assets/my_image.png,And it is giving 404 not found error.
In javascript, the code is something like
return (
<img src="/assets/my_image.png"></img>
)
Since this is a js file, I cannot use asset_path helper method here.
How to resolve this issue ?
PS: setting config.assets.precompile to true loads the image from app.my_domain.com/assets/my_image.png, but that's not what I want because of this. config.assets.compile=true in Rails production, why not?
Any help with this is highly appreciated. Thanks in advance.
I found an answer after some research. I changed the name of the file to js.jsx.erb and accordingly used asset_path helper method which rails provide.
return (
<img src = "asset_path 'my_image.png'"/>
)
It works.
I am using angular2 for web development, and Jenkins for continuous integration, when i release code at the end of every sprint, it gets deployed on CI Server.
But, when users load the UI, they do not get the new UI changes by default, they have to clear the cache ( I do not want users to clear the cache or disable there cache just for this UI)
How can I handle programatically for the browser to not cache old files and reload the new changes by default (atleast in development)
Note:
I presently set:
import { enableProdMode } from '#angular/core';
enableProdMode();
None of the documentation states this to be the reason and removing it does not help either.
Two popular ways of accomplishing this "cache busting" are:
Using a query string on the end of your file request that gives a version number. For example, when you create a javascript file you would name it "my-file.js". Then in your HTML you would request it as:
<script type="text/javascript" src="my-file.js?v=1.0.0"></script>
When you make some changes to your file you update your request to:
<script type="text/javascript" src="my-file.js?v=1.0.1"></script>
You can use whatever query string you want as long as you change it. The browser sees it as a different file, but it should have no effect on what file your server sends as a response.
If you are using a bundler like webpack or systemJS they can automatically include a hash as part of the file name. This hash can change based on the file contents so that when the contents change the file name changes and thus the file is no longer cached. The caveat with this is that you need to update the file name you are requesting in your HTML. Again, most tools have a way to automatically do this for you.
A webpack example config to accomplish this is:
output: {
path: 'dist',
publicPath: '/',
filename: 'js/[name].[chunkhash].js'
},
and then use the HtmlWebpackPlugin to auto-generate your index.html with the correct file names injected (with inject: true):
plugins: [
new HtmlWebpackPlugin({
filename: '../index.html',
template: './index.html',
inject: true
}), ...
More info on webpack file naming:
https://github.com/webpack/docs/wiki/Configuration#output
More info on html webpack plugin:
https://github.com/ampedandwired/html-webpack-plugin#basic-usage
I fixed it using a special .htaccess file. Just uncomment the "BROWSER CACHING" part:
https://gist.github.com/julianpoemp/bcf277cb56d2420cc53ec630a04a3566
I'm trying to get this working and I have spent a day now with not much success... I'm new to both Laravel and GulpJS, which makes it even better I guess... :)
What I'm trying to achieve is a (preferably cross-platform) solution for reloading the browser on file changes using GulpJS on a Laravel instance. I could get gulp-livereload working as per its documentation, but I cannot set it up properly to have an effect on the local domain http://laravel.dev set with MAMP PRO (I know, I know...).
I am happy to leave MAMP behind if it's a must as long as I can set a local development domain on a project-by-project basis. I tried to look around even on https://laracasts.com/ but I'm yet to find a solution which would take care of automatic reloading of the browser with Laravel - it seems this bit is missing from all Laravel-GulpJS solutions...
Anybody for the rescue? Any ideas? I'll keep looking in the meantime... :)
Of course, you can use gulp-livereload with Laravel. And you don’t have to use Elixir for livereload. Just do the following:
Install gulp modules as usual in your Laravel App folder:
npm install --save-dev gulp gulp-livereload
Add javascript to Laravel layout script for livereload with src="//localhost:35729/livereload.js?snipver=1" (sorry, this site doesn't allow me to insert complete javascript snippet)
Install LiveReload browser extension
The simplest gulpfile.js will be like this:
var gulp = require('gulp'),
livereload = require('gulp-livereload');
gulp.task('reload', function() {
livereload.reload();
});
gulp.task('watch', function() {
livereload.listen();
gulp.watch(['./public/**/*.css', './app/**/*.php', './resources/**/*.php'],
['reload']);
});
run gulp watch