Rails 5.1 Moving js files from app/assets/javascripts to app/javascript - asset-pipeline

I was trying to move my JS files from app/assets/javascripts to app/javascript. Basically moving away from Asset Pipeline to Webpack.
I am getting multiple errors on the process.
1. The only thing I did is moved the file and removed the precompile statement from config/initializers/assets.rb
This is what I get:
DEPRECATION WARNING: The asset "disallow-char.js" is not present in the asset pipeline.Falling back to an asset that may be in the public folder.
This behavior is deprecated and will be removed.
To bypass the asset pipeline and preserve this behavior,
use the `skip_pipeline: true` option.
2. Then I added the following on the html.haml file:
```= javascript_include_tag 'disallow-char.js', skip_pipeline: true```
This is what I get:
Started GET "/javascripts/disallow-char.js" for ::1 at 2018-04-26 15:11:18 -0500
Processing by ErrorsController#routing as JS
Parameters: {"any_bad_route"=>"javascripts/disallow-char"}
::1 - - [26/Apr/2018:15:11:18 CDT] "GET /packs/application-26fc747cc9104717d89e.js HTTP/1.1" 304 0
And on the Browser I am getting this error:
GET http://localhost:3000/javascripts/disallow-char.js net::ERR_ABORTED
The location of the file is app/javascripts/frontend/disallow-char.js
My app/javascript/packs/application.js looks as follows:
/* eslint no-console:0 */
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
//
// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
// layout file, like app/views/layouts/application.html.erb
const frontend = require.context('../frontend', true, /\.js$/);
application.load(definitionsFromContext(frontend));
export default application;
Has anyone seen there error before? Anything that I am missing?

Related

Why is Eleventy looking for templates in my /history folder?

For some reason Eleventy is looking for templates in my /history folder, which I have already made changes to. Is there a way to stop this?
Now when I run my build the following error occurs:
[11ty] 2. (./.history/_includes/layouts/base_20220423223526.njk)
[11ty] Error: template not found: partials/navigation.njk (via Template render error)
[11ty]
[11ty] Original error stack trace: Template render error: (./.history/_includes/layouts/base_20220423223526.njk)
[11ty] Error: template not found: partials/navigation.njk
Here is my repo if you would like to have a look:
https://github.com/dulzorigo/eleventy-tailwind
Forked from:
https://github.com/ThirusOfficial/eleventy-tailwind
By default, Eleventy processes all files in your provided input folder, which is the root of your project in this case. To have Eleventy ignore certain folders or files, you can create an .eleventyignore file containing .history. See the Eleventy documentation for more information.

Vapor `Public` directory inside docker image is not exposed

I'm running Vapor 4.3 and Leaf with Xcode on my Mac without any issues.
public directory middleware is enabled:
let fileMW = FileMiddleware(publicDirectory: directory)
app.middleware.use(fileMW)
as soon as I build the image using the default dockerfile and run it on the docker, the css and all image files are not loaded anymore.
Note: the dockerfile is the exact same one that came with the vapor new command. (Updated to the date of the writing this post)
Safari shows this error:
[Error] Did not parse stylesheet at 'http://127.0.0.1/styles/index.css' because non CSS MIME types are not allowed in strict mode.
Chrome shows this warning:
Resource interpreted as Stylesheet but transferred with MIME type text/plain: "http://127.0.0.1/styles/index.css".
What am I missing?
Looks like it is a case sensitivity issue! Mac has no problem finding files with this issue but Linux not!
⚠️ Even if you already set: app.routes.caseInsensitive = true, it will not affect your resources requests.
So make sure you have set all paths exactly as they appear in pwd command.

Editing Hugo-Academic theme in `blogdown` doesn't show updates made

I am using blogdown for the first time and have installed the Hugo-academic theme via the recommended method, blogdown::new_site(theme = 'gcushen/hugo-academic').
I have started editing the config.toml and the updates render as expected. After attempting to edit the about.md file it appears that none of the edits I've made are showing up. I've deleted some of the example files (such as Selected Projects, etc) however the site preview still shows them . I came across (Customize the "about" widget in hugo academic theme) which feels related, and upon executing hugo -v in terminal (within RStudio in the same project) I get the following error which I can't comprehend:
ERROR 2018/06/25 19:50:10 Error while rendering "home" in "": template: index.html:1:3: executing "index.html" at <partial "widget_page...>: error calling partial: template: partials/widget_page.html:23:9: executing "partials/widget_page.html" at <partial $widget $par...>: error calling partial: template: partials/widgets/projects.html:66:84: executing "partials/widgets/projects.html" at <delimit.Params.tags...>: error calling delimit: can't iterate over <nil>
An attempt at understanding: Have I deleted a file I should not have or not updated something in config.toml such that it is looking for a file which I've now deleted?
I'm on a Mac, and using RStudio version 1.1.453 in case it is useful to know
I will have to see what changes you have made in the config.toml.
If you scroll down in the config.toml file you should find [params.menus] in that the first menu is for About. It looks like this:
[[menu.main]]
name = "About me"
url = "#about"
weight = 1
If the params are okay, and if you edited the about.md file in the root>content>home folder it should be okay.

Laravel Mix and SASS changing font directory

I'm using Laravel 5.4 and Laravel Mix to output SASS files.
In my font definitions I'm configuring them so that when the CSS is output it will point to files such as public/assets/fnt/font-name/filename.ext but the processor changes the output so that it will instead point to public/fonts/filename.ext. Is there a way to stop it from changing the output paths?
It makes little sense to me that it would do something like this by default.
Edit
I've seen that the defaults they're using in Mix are the culprit:
module.exports.module = {
rules: [
// ...
{
test: /\.(woff2?|ttf|eot|svg|otf)$/,
loader: 'file-loader',
options: {
name: 'fonts/[name].[ext]?[hash]',
publicPath: '/'
}
}
]
};
I've tried using null-loader instead of file-loader but instead it causes it to fail because it can't find the files in node_modules which is not where it should be looking in the first place.
Removing the rule in question results in a flood of errors from trying to open and evaluate the font files in question:
error in ./public/assets/fnt/fanfare-jf/fanfare-jf.ttf
Module parse failed: DIRECTORY\public\assets\fnt\fanfare-jf\fanfare-jf.ttf Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
# ./~/css-loader!./~/postcss-loader!./~/resolve-url-loader!./~/sass-loader?sourceMap&precision=8!./resources/assets/sass/app.scss 6:2525-2590
# ./resources/assets/sass/app.scss
# multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss
I can at least add emitFiles: false to options to prevent it from making copies of the file, but the paths are still being altered.
I ended up with the following configuration to at least get it to a working state.
let assetDir = 'assets/build';
mix.config.fileLoaderDirs.fonts = `${assetDir}/${mix.config.fileLoaderDirs.fonts}`;
mix.config.fileLoaderDirs.images = `${assetDir}/${mix.config.fileLoaderDirs.images}`;
mix.sass('resources/sass/app.scss', `public/${assetDir}/css`)
.js('resources/js/app.js', `public/${assetDir}/js`);
Updated:
In newer versions this has been made customizable via mix.options() and can be adjusted as below:
let assetDir = 'assets/build';
mix.options({
fileLoaderDirs: {
images: `${assetDir}/img`,
fonts: `${assetDir}/fonts`
}
});
// adjust build commands accordingly, for example:
mix.js('resources/js/app.js', `public/${assetDir}/js`);
The output you got is the intended behaviour due to your configuration.
You are using this configuration to load the file:
options: {
name: 'fonts/[name].[ext]?[hash]',
publicPath: '/'
}
Which says use the publicPath as public and create a file with the name fonts/[name].[ext]?[hash] and webpack knows about what these symbols '/', '.', '?' in the name do.
It just looks for the fonts directory and if there is no any fonts directory it creates a new one and place the files into that directory.
So, you need to use this configuration for your folder structure:
options: {
name: 'assets/fnt/font-name/[name].[ext]?[hash]',
publicPath: '/'
}
This should work for your configuration.
More on file-loader configuration:
https://github.com/webpack-contrib/file-loader#filename-templates
Edit:
Since Laravel Mix uses Webpack in it's background and Webpack doesn't have any knowledge of the fonts file when there is no any appropriate loader added to the configuration. So, the error:
Module parse failed: DIRECTORY\public\assets\fnt\fanfare-jf\fanfare-jf.ttf Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
is occurred.
You need to tell the Webpack to load the fonts to your desired directory and the fonts linked in your SASS file will be linked by the Webpack without any more configurations.

Dajaxice not found on production server

I have a Django 1.4 project, running on Python 2.7 in which I'm using Dajaxice 0.5.4.1. I have set it up on my development machine (Windows 7) and everything works perfectly. However when I deploy my app to production server (Ubuntu 12.04) I get 404 error for dajaxice.core.js file and cannot resolve this problem no matter what. Production server works with exactly the same versions of all software.
My project structure looks like this:
/myproject
/myproject/myproject-static/ <-- all the static files are here
/myproject/myproject-static/css/
/myproject/myproject-static/img/
/myproject/myproject-static/js/
/myproject/templates/
/myproject/myproject/
/myproject/main/
/myproject/app1/
/myproject/app2/
/myproject/app3/
etc.
I was following the Dajaxice installation steps here and put everything in its place (in settings.py, ˙urls.pyandbase.html` files).
My settings.py file has also these values:
from unipath import Path
PROJECT_ROOT = Path(__file__).ancestor(3)
STATIC_ROOT = ''
STATIC_URL = '/myproject-static/'
STATICFILES_DIRS = (
PROJECT_ROOT.child('myproject-static'),
)
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
'dajaxice.finders.DajaxiceFinder',
)
DAJAXICE_MEDIA_PREFIX = "dajaxice"
DAJAXICE_DEBUG = True
I have an Alias directive in my django.conf file which looks like this:
Alias /myproject-static/ "/path/to/myproject/myproject-static/"
I did collectstatic on my production server and got all static files collected within few folders in the root of my project. So, now when I look at my deployed web site, I can see that CSS is properly applied, JavaScript is working fine and navigation around the site works as intended. Everything is fine except Ajax is totally broken since dajaxice.core.js is never included.
My project folder structure after collecting static looks like this:
/myproject
/myproject/myproject-static/ <-- all the static files are originally here
/myproject/myproject-static/css/
/myproject/myproject-static/img/
/myproject/myproject-static/js/
/myproject/templates/
/myproject/admin/ <-- folder created with 'collectstatic' command
/myproject/css/ <-- folder created with 'collectstatic' command
/myproject/dajaxice/ <-- dajaxice.core.js is located here
/myproject/django_extensions/ <-- folder created with 'collectstatic' command
/myproject/img/ <-- folder created with 'collectstatic' command
/myproject/js/ <-- folder created with 'collectstatic' command
/myproject/myproject/
/myproject/main/
/myproject/app1/
/myproject/app2/
/myproject/app3/
etc.
Am I doing something completely wrong with my static files here?
What else should I try to fix this simple error?
Have you check if as the rest of the assets, dajaxice.core.js is inside your static/dajaxice folder? If not, the issue could be related with a miss configuration of the STATICFILES_FINDERS, check Installing dajaxice again
Another usual issue with collectstatic and dajaxice is to run the first using --link Are you using this option?
Hope this helps
I spend several hours grappling with this problem. It was crazy because everything worked great on my dev environment, but not on the test server even though all the dajax and dajaxice settings were on a common base settings file. I never got it to work using the standard route. But this is a very easy fix:
1) Download dajaxice.core.js into whatever static directory pleases you. You can find the js in your the dajaxice directory in your project root:
project/dajaxice/dajaxice.core.js
In my case, I put the file in static/js alongside all my other js libraries.
2) On your web page, replace this:
{% dajaxice_js_import %}
with a normal, everyday link to the js library. In my case:
<script src="/static/js/dajaxice.core.js" type="text/javascript"></script>
Unfortunately, this patch only works for developed code. If you usedo it in the development environment, new dajaxice code will be registered in the original project/dajaxice/ location and so the file will have to be copied to static after any new code is developed.

Resources