Integrate Bootstrap Theme in Phoenix Framework - twitter-bootstrap-3

I have been building a Meteor app and decided to ditch it in favor of phoenix. The problem I am having is trying to integrate a pre-made Bootstrap theme with my app. I need to be able to control the load order of the CSS, Sass, and JavaScript. In Meteor you put the load order in a package.json file and build a custom package for it. Also, you don't have to include import statements in your HTML. So my specific questions are these:
How do I control the load order of the files?
Where should all the JavaScript, CSS, Sass, and images files go? (I'm guessing in the static vendor directory?)
I do need to include the import statements in the HTML files correct?
This theme is pretty big with a bunch of JavaScript files, font awesome, Bootstrap CSS, custom CSS, Sass, images, and the kitchen sink.

In Phoenix this can be accomplished like so:
You'll want to include the sass-brunch package in your package.json file and run npm-install e.g.
{
"repository": {
},
"dependencies": {
"brunch": "^1.8.5",
"babel-brunch": "^5.1.1",
"clean-css-brunch": ">= 1.0 < 1.8",
"css-brunch": ">= 1.0 < 1.8",
"javascript-brunch": ">= 1.0 < 1.8",
"sass-brunch": "^1.8.10",
"uglify-js-brunch": ">= 1.0 < 1.8"
}
}
Now you'll change your app.css located web/static/css/app.css file to app.scss. From here import all of your css/sass files (I personally add bootstrap to the vendor folder under css web/static/vendor/css/bootstrap.scss) e.g.
#import "../vendor/css/bootstrap";
This next part might be the part that you had trouble figuring out, as I =o). What you do for javascript files is require them in your brunch-config.js file like so:
exports.config = {
// See http://brunch.io/#documentation for docs.
files: {
javascripts: {
joinTo: "js/app.js",
order: {
before: [
"web/static/vendor/js/jquery.min.js",
"web/static/vendor/js/bootstrap.min.js",
"web/static/vendor/js/scripts.js"
]
}
},
stylesheets: {
joinTo: "css/app.css"
},
templates: {
joinTo: "js/app.js"
}
},
conventions: {
// This option sets where we should place non-css and non-js assets in.
// By default, we set this to "/web/static/assets". Files in this directory
// will be copied to `paths.public`, which is "priv/static" by default.
assets: /^(web\/static\/assets)/
},
// Phoenix paths configuration
paths: {
// Dependencies and current project directories to watch
watched: [
"deps/phoenix/web/static",
"deps/phoenix_html/web/static",
"web/static",
"test/static"
],
// Where to compile files to
public: "priv/static"
},
// Configure your plugins
plugins: {
babel: {
// Do not use ES6 compiler in vendor code
ignore: [/web\/static\/vendor/]
}
},
modules: {
autoRequire: {
"js/app.js": ["web/static/js/app"]
}
},
npm: {
enabled: true
}
};

Related

No "eslint" targets found

I have a Gruntfile.js like this.
module.exports = function(grunt) {
require('time-grunt')(grunt);
require('load-grunt-config')(grunt, {
jitGrunt: {
staticMappings: {
scsslint: 'grunt-scss-lint'
}
}
});
grunt.loadNpmTasks('grunt-run');
grunt.registerTask('default', ['eslint', 'jest', 'scsslint', 'svgstore'])
};
And when I run the grunt it says.
grunt
No "eslint" targets found.
eslint is already installed and I even created the configuration file using
./node_modules/.bin/eslint --init
And this is the content of .eslintrc.js.
module.exports = {
"env": {
"browser": true,
"es2021": true,
"node": true
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaVersion": 13
},
"rules": {
}
};
Any opinions?
Depending on how you downloaded the codebase for the theme, it may be missing the "grunt" folder. If your project is missing this folder, try adding the one from Cornerstone: https://github.com/bigcommerce/cornerstone/tree/master/grunt
Per the BigCommerce documentation around eslint errors -- If bundling your theme triggers multiple lint errors related to the bundle.js file, your theme is missing the .eslintignore file.
You can retrieve this file from the Cornerstone repo. Once you add this in, re-run the bundle command.

How do i exclude a directory with mocking files from webpack build with vue.config.js?

I have a directory called mock at root which contains mocking data that I use to run the app in development mode. I would like to exclude them when i build for production. I notice that it is being added into bundle whenever i run vue-cli-service build and it is bloating my app bundle size.
I am using vue-cli and so I have to work with vue.config.js.
It is not clear from the docs or any answers on the wider web how I can specify which folders/files to exclude from the build.
Here is a snippet of my vue.config.js.
module.exports = {
chainWebpack: (config) => {
config.resolve.symlinks(false)
},
configureWebpack: {
plugins: [
new CompressionPlugin()
]
},
css: {
loaderOptions: {
scss: {
prependData: `#import "#/styles/main.scss";`
}
}
}
}
This is not the perfect solution, but...
If you want to exclude that directory at build time, you can try to use require instead of import. Something like this (source):
if (process.env.VUE_APP_MY_CONDITION) {
require('./conditional-file.js');
}
But be aware of this!

Embed react-native-web app into existing website

I want to embed a react-native-web application into an existing website and am currently looking for options how to do so.
The application should be a quite simple questionnaire which needs to be embedded into a website created with Elementor. My idea was to use the Elementor HTML widget and insert my application somehow, but unfortunately I cannot figure out how to do this.
I've got a bit of experience developing React Native(RN) apps but I am pretty new to web development and therefore thought it would be easier for me to go with RN and the react-native-web library.
So far, I've created a RN project using npx react-native init WebApp, copied the App.js, index.js and package.json files from react-native-web CodeSandbox template, deleted the node_modules folders and ran npm install. Then I was able to start and build this example web app with the scripts from the package.json.
Now my question, how can I use the output from the build directory and embed it into an html tag?
I also tried to use webpack with the configuration from the react-native-web docs to bundle the app but I always got a new error as soon as I fixed the last one. Is it possible to bundle a RN app into a single JS file which I could then insert into the website?
Looking forward to any advice!
Marco
I solved it by using the below webpack config. The created bundle.web.js' content is put into a script tag (<script>...</script>). This can be embedded into the HTML widget.
// web/webpack.config.js
const path = require('path');
const webpack = require('webpack');
const appDirectory = path.resolve(__dirname, '');
// This is needed for webpack to compile JavaScript.
// Many OSS React Native packages are not compiled to ES5 before being
// published. If you depend on uncompiled packages they may cause webpack build
// errors. To fix this webpack can be configured to compile to the necessary
// `node_module`.
const babelLoaderConfiguration = {
test: /\.js$/,
// Add every directory that needs to be compiled by Babel during the build.
include: [
path.resolve(appDirectory, 'index.web.js'),
path.resolve(appDirectory, 'src'),
path.resolve(appDirectory, 'node_modules/react-native-uncompiled'),
],
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true,
// The 'metro-react-native-babel-preset' preset is recommended to match React Native's packager
presets: ['module:metro-react-native-babel-preset'],
// Re-write paths to import only the modules needed by the app
plugins: ['react-native-web'],
},
},
};
// This is needed for webpack to import static images in JavaScript files.
const imageLoaderConfiguration = {
test: /\.(gif|jpe?g|png|svg)$/,
use: {
loader: 'url-loader',
options: {
name: '[name].[ext]',
},
},
};
module.exports = {
entry: [
// load any web API polyfills
// path.resolve(appDirectory, 'polyfills-web.js'),
// your web-specific entry file
path.resolve(appDirectory, 'src/index.js'),
],
// configures where the build ends up
output: {
filename: 'bundle.web.js',
path: path.resolve(appDirectory, 'dist'),
},
// ...the rest of your config
module: {
rules: [babelLoaderConfiguration, imageLoaderConfiguration],
},
resolve: {
// This will only alias the exact import "react-native"
alias: {
'react-native$': 'react-native-web',
},
// If you're working on a multi-platform React Native app, web-specific
// module implementations should be written in files using the extension
// `.web.js`.
extensions: ['.web.js', '.js'],
},
};

Aurelia and Semantic UI - custom theme

I am building an Aurelia app with TypeScript and decided to try out Semantic UI. I followed this question (Aurelia Semantic dropdown) and it helped me install Semantic into Aurelia. It seems that it got installed already built with default theme. Is there a way I can install semantic into Aurelia TypeScript app, then add some custom gulp tasks to build according to my own theme.config? I would like also to override some variables like colors, font sizes etc. After it is built I'd like to use the built version in Aurelia view models (TypeScript) and in my views. How can I achieve that?
Here is how I solved this:
Installed semantic to some local folder with npm
Copied over the semantic folder and semantic.json to web app root folder (so semantic folder is on the level where I have node_modules and jspm_packages)
Inside semantic.json I specified the list of components I want to include in my app
Inside semantic.json I modified "output" and "clean" paths to match the folders where I serve files from.
The semantic.json:
{
"base": "semantic",
"paths": {
"source": {
"config": "src/theme.config",
"definitions": "src/definitions/",
"site": "src/site/",
"themes": "src/themes/"
},
"output": {
"packaged": "../dist/semantic",
"uncompressed": "../dist/semantic/components/",
"compressed": "../dist/semantic/components/",
"themes": "../dist/semantic/themes/"
},
"clean": "../dist/semantic"
},
"permission": false,
"autoInstall": false,
"rtl": false,
"version": "2.2.4",
"components": [
"button",
...
"site"
]
}
Inside Aurelia's gulp definitions I added semantic build task
The build/tasks/build.js:
var buildSemantic = require('../../semantic/tasks/build');
gulp.task('build-semantic', buildSemantic);
...
gulp.task('build-layout', function (callback) {
return runSequence(
'build-html',
'build-semantic',
'build-less',
callback
);
});
When coding I go into semantic src (e.g. semantic\src\themes\default\globals\site.variables) and modify things in there
Run gulp build-layout
The output is added to my dist folder and I can use it in my views
As for the view models I created some helper components to be used as aurelia attributes e.g. the semantic tooltip:
import {customAttribute, inject} from 'aurelia-framework';
import * as $ from 'jquery';
import '../semantic/semantic.min.js';
#customAttribute('semantic-tooltip')
#inject(Element)
export class SemanticTooltip {
constructor(private element: HTMLElement) {
}
attached() {
$(this.element).popup();
}
}
Usage:
<i class="info circle icon" data-content="Sample tooltip" semantic-tooltip></i>

ASP.Net vNext structure and development flow

I've recently downloaded VS15 CTP-6 to get the feeling of how to develop the next generation VS projects, but having trouble figuring out the development flow I should be following with this separation of code and wwwroot.
The way I understand it is this (Angular project):
Develop views, css and js.
Use grunt tasks to uglify and copy css and js to wwwroot folder.
Browse wwwroot as a local IIS site to see the changes.
When wwwroot is ready for production, copy its content.
But if I find a problem during step 3, how can I find its origin given that the js and css are minified ?
Surely I'm wrong, so should I create another copy of wwwroot for development, without the minification?
You should use grunt task to uglify/minify your code when you're ready to go in production
And use an other grunt task to copy your code when you're in dev
Or you can use uglify with 2 target: 1 to uglify and 1 to beautify:
module.exports = function (grunt) {
grunt.initConfig({
bower: {
install: {
options: {
targetDir: "wwwroot/lib",
layout: "byComponent",
cleanTargetDir: false
}
}
},
uglify: {
ugli_target: {
files: {
"wwwroot/scripts/chat.js": ["Scripts/chat.js"]
}
},
beauty_target: {
options: {
beautify: {
beautify: true
},
mangle: false,
sourceMap: true
},
files: {
"wwwroot/scripts/chat.js": ["Scripts/chat.js"]
}
}
}
});
// This command registers the default task which will install bower packages into wwwroot/lib
grunt.registerTask("default", ["bower:install"]);
// The following line loads the grunt plugins.
// This line needs to be at the end of this this file.
grunt.loadNpmTasks("grunt-contrib-uglify");
grunt.loadNpmTasks("grunt-bower-task");
};