I am working on an angularjs-rails app, I want to load some javascript only on specific paths, for that reason I want to install ocLazyLoad.
I have succesfuly installed the module but when I am trying to load a js file I get a 404.
when('/mypath', {
templateUrl: 'mc/templates/mypath.html',
controller: 'MyPathController',
resolve: {
deps: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load([{
name: 'mypath',
files: [
'javascript/mypath.js'
]
}]);
}]
}
})
Related
I need to handle GLTF and HDR files in my Vue/Three.js application. This doesn't work out of the box with Vite. With Webpack I can set this in the Webpack config
module.exports = {
module: {
rules: [
{
test: /\.(gltf)$/i,
use: [
{
loader: 'url-loader',
},
],
},
],
},
};
Is there a way to do the same in Vite?
Seems like Vite can handle this out of the box. The problem was the cors settings of the server the files were on.
I have a rails app which is actually a clone of yts.mx. Now the idea was to have the front-end work in Vue.js, for which I created an independent Vue project inside the root directory of the existing rails app.
I have written GraphQl queries and tried using apollo client for communication with Vue but it gives me a dependency not found error with the path of the module Iv'e imported.
This dependency was not found:
* graphql/queries/movies/retrieveMovies.gql in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/MovieBlock.vue?vue&type=script&lang=js&
To install it, you can run: npm install --save graphql/queries/movies/retrieveMovies.gql
Here's my retrieveMovies.gql file
query {
movies{
name
release_date
}
}
here's the script tag for the MovieBlock.vue Vue component
<script>
import GET_MOVIES from 'graphql/queries/movies/retrieveMovies.gql'
export default {
name: 'MovieBlock',
apollo: {
movies: {
query: GET_MOVIES,
update: data => {
debugger
}
}
},
data () {
return {
movies: []
}
}
}
</script>
Here's the Directory Structure of the project:
My current application is set up using Ruby on Rails and React/Typescript. I am trying to set up hot reloading.
Here is the current folder structure
Project Root
- app => all the rails code
- frontend => all the react code
- webpack => list of configuration files, like development.js and production.js
This project isn't using react_on_rails or webpacker. The frontend code is kept separate from the backend code. The Rails backend serves up an html
<div id='root' />
and the react code will run off of that.
This is the command I tried to run to get hot reloading to work
node_modules/.bin/webpack-dev-server --config=./webpack/development.js --hotOnly --entry=../frontend/Entry.tsx --allowedHosts=localhost:3000
However, not only is hot reloading not working, the changes I made are not showing up in the browser as well. Everything looks like in the terminal.
My issue here is I technically have two servers running at the same time.
localhost:3000 => Rails server
localhost:8080 => Webpack dev server.
If I change webpack server to point to 3000 as well, the rails app will not work properly.
Is there a way where I can get hot reloading to work using this setup?
here are the webpack version
"webpack": "^4.20.1",
"webpack-cli": "^3.1.1",
"webpack-dev-server": "^3.7.1"
webpack.development.config.js
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
module.exports = {
context: __dirname,
entry: '../frontend/Entry.tsx',
devtool: 'source-maps',
resolve: {
extensions: ['*', '.js', '.jsx', '.ts', '.tsx'],
modules: [
'node_modules',
path.resolve(__dirname, '../frontend'),
path.resolve(__dirname, '../node_modules')
]
},
output: {
path: path.join(__dirname, `../public/javascripts/`),
publicPath: `/javascripts/`,
filename: '[name]-[hash].js'
},
module: {
rules: [
{
test: /\.(t|j)sx?$/,
loader: 'ts-loader',
options: {
// disable type checker - we will use it in fork plugin
transpileOnly: true
}
},
{
enforce: 'pre',
test: /\.(t|j)sx?$/,
loader: 'source-map-loader'
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name]-[hash].[ext]',
outputPath: 'images/'
}
},
{
loader: 'image-webpack-loader',
options: {
pngquant: {
quality: '40',
speed: 4
}
}
}
]
}
]
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('development')
}
}),
new HtmlWebpackPlugin({
template: path.join(__dirname, '..', 'application.html'),
filename: path.join(__dirname, '..', 'app', 'views', 'layouts', '_javascript.html.erb')
}),
// runs typescript type checker on a separate process.
new ForkTsCheckerWebpackPlugin({
checkSyntacticErrors: true,
tsconfig: '../tsconfig.json'
}),
new CaseSensitivePathsPlugin()
],
optimization: {
splitChunks: { chunks: 'all' }
}
};
Since you are setting up webpack dev server the first time, the problem is two fold,
Setup webpack dev server
Configure hot reload
Setting up webpack dev server
I presume your app is the api server. Similarly webpack-dev-server too is a http server. Its just a wrapper around expressjs infact.
while using webpack dev server during development, the bundles are served by webpack dev server, and all xhr requests are made to this dev server. In order to route these requests to your app server, you need to add proxy rules to your webpack config.
On a high level the flow would look as follows.
browser ---(xhr requests)-----> webpack-dev-server -----(proxy api requests)--->app server
In order to add a proxy rule to route all api request to your rails server, your api routes should be prepended with /api, eg, /api/customers so that all request matching /api are forwarded to the rails server
A sample config to support the above flow would be something as follows in your webpack config file
module.exports = {
// ...your other configs
devServer: {
contentBase: path.join(__dirname, 'public/'),
port: 8080,
publicPath: 'http://localhost:8080/', // Path of your dev server
historyApiFallback: true, // add this if you are not using browser router
proxy: {
'/api': { // string to look for proxying requests to api
target: 'http://localhost:3000', // Path of your rails api server
},
},
},
// ...your other configs
}
Setting up Hot reload
In order to setup hot reload, I would recommend to use Dan Abramov's react-hot-loader as its less buggy in hmr patching.
Setting up hmr is easy
Add the dependency yarn add react-hot-loader
Add babel plugin in your .babelrc
{
"plugins": ["react-hot-loader/babel"]
}
Mark your root component as hot exported
import { hot } from 'react-hot-loader/root'; // this should be imported before react and react-dom
const App = () => <div>Hello World!</div>;
export default hot(App);
Note: Its safe to add react-hot-loader in your dependencies, because in your production build. Hot reload package will be stripped out.
To start the webpack server in hot mode, you can add a script like below in your package.json.
"scripts": {
"start": "webpack-dev-server --hot --mode development --config ./webpack.dev.config"
}
I am using Grunt + browserSync + grunt-php. The server starts normally. The problem is that whenever I make changes to PHP files, the changes are not reloaded automatically in browser. I have to manually reload the page despite having the settings in place. Been trying to solve this issue for the past 1 week, but no success. Tried out other online sources, but didn't help either. Please help.
Directory structure:
my_app/
src/
index.php
about.php
dist/
Gruntfile.js:
"use strict";
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: {
php: {
files: ['src/**/*.php']
}
},
browserSync: {
dev: {
bsFiles: {
src: 'src/**/*.php'
},
options: {
proxy: '127.0.0.1:8010', //our PHP server
port: 8080, // our new port
open: true,
watchTask: true
}
}
},
php: {
dev: {
options: {
port: 8010,
base: 'src'
}
}
}
});
grunt.registerTask('default', [
'php', // Using the PHP instance as a proxy
'browserSync',
'watch' // Any other watch tasks you want to run
]);
};
A kind soul helped me with the answer. I don't take credit for the answer and would like to share the solution so that it may help someone in need. Here it is:
1) Just make sure that you have the body tag in the PHP file that you want to reload.
2) Include the following JS code in the page:
<script id="__bs_script__">
//<![CDATA[
document.write("<script async src='/browser-sync/browser-sync-client.js?v=2.17.5'><\/script>".replace("HOST", location.hostname));
//]]>
</script>
With ASP.NET 5, I am moving from ASP.NET MVC's bundling system to a Bower/Grunt workflow for my client-side package management and bundling/minification. I'm trying to figure out how to closely replicate the MVC bundling functionality.
With MVC bundling, I manually created all of my bundles and then call out to a helper method such as: #Styles.Render("~/bundles/styles/site"). In development I get separate link element for each CSS file in the bundle and in production I get a single combined and minified CSS file.
I have successfully set up Grunt with Bower to pull down packages and copy them into the appropriate final destination, but there's no differentiation between development and production. What's the closest functionality to my existing MVC bundling workflow?
This article below explain a very nice way to have both (Bower and .NET Bundle Config) playing nicely together...
http://robertnoack.com/x86/2014/07/asp-net-mvc-using-bowergruntwiredep-to-inject-javascript-dependencies-into-bundleconfig-cs/
The key info, is to use a Grunt Task (wiredep) to target the BundleConfig.cs file so you could still use bower to manage your dependencies and still use BundleConfig to let .NET minify your stuff for you.
After a day of pain, I have got grunt basically behaving in the same manner as asp.net minification with debug & release builds.
I have put together a git repo so you can just pull all the relevant files and mod as required.
https://github.com/glaidler/grunt-equivalent-asp.net-minification
You can use the grunt contrib css min task to create a bundle of your css
Read this post : http://love2dev.com/#!article/Using-GruntJS-to-Bundle-and-Minify-JavaScript-and-CSS
I'm a pretty big fan of the way Yeoman handles assets in the angular generator. It uses wiredep to automatically include Bower packages in your index.html. Usemin is used to group files you want in bundles and Filerev updates the asset locations and adds a cache breaker. Here is the a sample of some of the Grunt settings I have.
wiredep: {
app: {
src: ['<%= yeoman.app %>/index.html'],
exclude: ['bootstrap.css'],
fileTypes: {
html: {
replace: {
js: '<script src="/{{filePath}}"></script>',
css: '<link rel="stylesheet" href="/{{filePath}}" />'
}
}
},
ignorePath: /\.\.\//
}
},
// Renames files for browser caching purposes
filerev: {
dist: {
src: [
'<%= yeoman.dist %>/scripts/{,*/}*.js',
'<%= yeoman.dist %>/styles/{,*/}*.css',
'<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
'<%= yeoman.dist %>/styles/fonts/*'
]
}
},
// Reads HTML for usemin blocks to enable smart builds that automatically
// concat, minify and revision files. Creates configurations in memory so
// additional tasks can operate on them
useminPrepare: {
html: '<%= yeoman.app %>/index.html',
options: {
dest: '<%= yeoman.dist %>',
flow: {
html: {
steps: {
js: ['concat', 'uglifyjs'],
css: ['cssmin']
},
post: {}
}
}
}
},
// Performs rewrites based on filerev and the useminPrepare configuration
usemin: {
html: ['<%= yeoman.dist %>/**/*.html'],
css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
options: {
assetsDirs: ['<%= yeoman.dist %>', '<%= yeoman.dist %>/images'],
patterns: {
js: [
[/templateUrl:"(templates[/A-Za-z0-9]*\.html)"/]
]
}
}
},
The relevant npm packages are grunt-wiredep, grunt-filerev, and grunt-usemin
You will need to add a grunt build process after MSBuild that takes the files in your bin folder and runs these grunt tasks on them.