I'm trying to include the bcoin library in my Meteor project. bcoin uses two type of modules, <module>.js and <module>-browser.js, depending whether one is building a node app or a browser app. In my case I need to import bcoin in the frontend part of my project, but a normal import bcoin from 'bcoin' resolves the module bcoin.js by default. Even if I use import bcoin from 'bcoin/lib/bcoin-browser' the file bcoin-browser.js will require other .js files rather than their -browser.js variant. The webpack configuration uses the directive
resolve: {
modules: ['node_modules'],
extensions: ['-browser.js', '.js', '.json']
},
is there something similar in Meteor?
Thanks
Related
I'm trying to use Vite.js in a WordPress theme to process my asset files.
I've created a vite.config.js file:
import { defineConfig } from 'vite';
export default defineConfig({
root: './resources',
build: {
rollupOptions: {
input: ['./resources/test.scss'],
},
},
server: {
port: 1337,
},
});
And I'm loading the Vite.js client plus the asset from the server:
<script type="module" src="http://127.0.0.1:1337/#vite/client"></script>
<link rel="stylesheet" href="http://127.0.0.1:1337/test.css?ver=6.0.1">
But this results in a 404 error for the test.css file. When using a css/js file instead of scss, everything including HMR works fine. I'm also not getting any warning about sass needing to be installed, so I assume Vite.js skips the scss file completely for some reason.
Is it a good idea to use the rollupOptions.input option for just listing resources in the first place or is there a better way? As I'm not building a JS application, there's no entry point such as an index.html, just some js/scss files I want to process.
You need to install SASS npm add -D sass https://vitejs.dev/guide/features.html#css-pre-processors.
The input file is a JavaScript file input: 'main.js', that itself imports the SCSS files import './resources/test.scss';.
Generally, the backend integration guide would help you with the setup for a multipage app like WordPress https://vitejs.dev/guide/backend-integration.html.
I have a monorepo project which one project (main) depends on the other (components).
So when I start the whole monorepo the main project uses a webpack.dev and the components project just use simple typescript compiler.
Like this:
(main): yarn start: webpack-dev-server ...
(components): yarn start: tsc -b
I have no problem when it comes to only TS code, but when it comes to non-ts files (css) I get a webpack module missing error.
I've already put both css-loader and style-loader into my webpack config from my main project but it didn't seem to solve the problem, it looks like typescript is not compiling the css file correctly
in my component project I have some like this:
import "./index.css"
export const Button = () => {
...
}
and then I get this error from my main project
Module not found: Error: Can't resolve './index.css' in '{...}/frontend/design-components/build'
my webpack in my main project:
module: {
rules: [
...,
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
],
but I think the main problem is the way the components project is handling the build (i'm building only with typescript, no rollup nor webpack in this project)
just ended up creating a webpack for my component project as well
For two days I'm trying to start using Vue 2 in my Meteor project. First I looked up some packages, and found https://github.com/meteor-vue/vue-meteor, but other than a list of packages it lacks anything usable itself, so here is that. A separate search on Atmosphere yielded in something I could actually use, namely https://atmospherejs.com/akryum/vue, but despite following every instruction I could find for this package, I don't think it works correctly for me, for example, I don't get the console messages regarding component hot reload, only the usual standard Meteor startup messages+messages when a file changes. It doesn't make use of the client/main.html file, unless I import it explicitly in client/main.js, but then I get a runtime error about missing module ./main.html, even tho I can clearly see then the template rendered, but w/o Vue magic in it. In the provided example project (without Blaze) I don't see the HTML being imported explicitly anywhere, so something is definitely off here. There are no other hints and clues in any produced output. So I'm stuck in limbo.
P. S. I also just realized it doesn't even do anything with the .vue components, as 1) I forgot to change an import from .js to .vue, and the app didn't crash at any time, and then, the imported .vue file was actually syntactically incorrect, until I fixed it just now.
For a starter boilerplate of Meteor + Vue, the perfect bundling + packages selection is Akryum's https://github.com/meteor-vue/vue-meteor-demo
I used it, and deployed to galaxy without problems. Excellent start.
This boilerplate contains:
Meteor 1.4 - 1.7+ + tracker + Vuejs 2 + vue-router + vuex (store) + graphql set up.
Cheers
I am starting to document my experience while trying to integrate the 2 technologies. If you want to see more: https://forums.meteor.com/t/meteor-vue-in-2018/44246
I have a bit different folder structure, but hopefully it is still relevant.
I have written an article that describes in detail the steps to install Vue and Vue Router in a Meteor application. I don't like putting links on Stackoverflow, but it's too much detail included in a answer here.
https://medium.com/#simonjcarr/adding-vue-and-vue-router-to-meteor-7c411131494f
I am using the following setup.
Packages
.meteor/packages
meteor-base#1.3.0 # Packages every Meteor app needs to have mobile-
experience#1.0.5 # Packages for a great mobile UX
mongo#1.4.2 # The database Meteor supports right now
tracker#1.1.3 # Meteor's client-side reactive programming library
standard-minifier-js#2.3.1 # JS minifier run for production mode
es5-shim#4.7.0 # ECMAScript 5 compatibility for older browsers
ecmascript#0.10.6 # Enable ECMAScript2015+ syntax in app code
shell-server#0.3.1 # Server-side component of the `meteor shell` command
static-html akryum:vue-component
akryum:vue-blaze-template
session#1.1.7
check
dynamic-import#0.3.0
fourseven:scss
seba:minifiers-autoprefixer
package.json
{
"private": true,
"scripts": {
"start": "meteor run"
},
"dependencies": {
"#babel/runtime": "^7.0.0-beta.44",
"meteor-node-stubs": "~0.2.0",
"#deveodk/vue-toastr": "^1.0.4",
"babel-runtime": "^6.23.0",
"bcrypt": "^1.0.2",
"vue": "^2.2.6",
"vue-router": "^2.5.1",
"vuex": "^2.3.1"
},
"devDependencies": {}
}
Client directory
client/main.html
<body class="pace-done md-skin">
<div id="app"></div>
</body>
client/main.scss
// Libs
import {Meteor} from 'meteor/meteor'
import Vue from 'vue'
import { router } from '/imports/client/plugins/router';
import store from '/imports/vuex/store'
import AppLayout from '/imports/client/ui/AppLayout.vue'
// import '/imports/client/plugins/plugin_name'
// App start
Meteor.startup(() => {
new Vue({
store,
router,
el: '#app',
render: h => h(AppLayout)
})
});
Rest is standard vue. I can add alse AppLayout.vue to demonstrate what I mean
/imports/client/ui/AppLayout.vue
<template>
<router-view></router-view>
</template>
<script>
export default {
name: 'AppLayout'
}
</script>
How do I add Semantic-UI to Phoenix?
Semantic-UI is installed in a folder and updated using NPM, and the actual CSS and Javascript files are built using GULP. Where should the full install folder be placed?
Can it be automatically updated through Mix like the rest of the dependencies?
Should the generated css and javascript be placed in project/web/static/css (or /js) or /vendor?
How do set up Gulp/Sematic-UI configuration to automatically put the files in the right places?
Again, can Mix run Gulp/Semantic-UI build automatically?
Where should the full install folder be placed?
Actually, you just need 2 files: semantic.js & semantic.css.
if you did npm install --save semantic-ui you should find them in ./semantic/dist/
So, where should these 2 files be placed?
It depends on ... are you brunch or webpack? What is relevant to a phoenix app is to find the static files (css, js, font, img, ...) in the ./priv/static folder as you can see in the endpoint.ex Plug.Static. Phoenix is not aware of the directory where you did put these files before running brunch, webpack or/and gulp.
Can it be automatically updated through Mix ...
Yes, add a script in package.json, modify the watchers in config/dev.exs
Should the generated css and javascript be placed in project/web/static/css (or /js) or /vendor?
Same answer, are you brunch or webpack?
What is relevant to a phoenix app is to find the static files (css, js, font, img, ...) in the ./priv/static folder as you can see in the endpoint.ex Plug.Static. Phoenix is not aware of the directory where you did put these files before running brunch, webpack or/and gulp.
How do set up Gulp/Sematic-UI configuration to automatically put the files in the right places?
Check out the file ./semantic.json to set up the output of the gulp build command.
can Mix run Gulp/Semantic-UI build automatically?
Yes, add a script in package.json, modify the watchers in config/dev.exs
This is not easy, and I recommend you to first start using npm semantic-ui-css and when your build works well to switch to npm semantic-ui
It is quite easy to integrate Semantic UI LESS only Distribution with Phoenix application with a bit of a trick. I would suggest you to use Webpack instead of brunch/gulp as it is relatively popular with lot of plugins and easy to configure.
Before starting with the procedure, it is expected that the Phoenix App is installed with default Brunch build tool and it's working.
Integrating Webpack
Please follow my Semantic UI and Webpack integration detailed guide with in-depth step by step procedure. This answer is in reference to this article.
Link: How to Integrate Your Phoenix Application with Semantic UI and Webpack
Integrating Semantic UI
Before we install Semantic UI, we need to put some configurations in place. We will create a new semantic-fix file.
vim web/static/lib/semantic-fix.js
Paste the following contents in the semantic-fix.js file which we just created. This file will take care of putting all Semantic UI assets in place for using it with our application
// ----------------------------------------------------
// File: web/static/lib/semantic-fix.js
// ----------------------------------------------------
var fs = require('fs');
// relocate default config
fs.writeFileSync(
'node_modules/semantic-ui-less/theme.config',
"#import '../../src/semantic/theme.config';\n",
'utf8'
);
// fix well known bug with default distribution
fixFontPath('node_modules/semantic-ui-less/themes/default/globals/site.variables');
fixFontPath('node_modules/semantic-ui-less/themes/flat/globals/site.variables');
fixFontPath('node_modules/semantic-ui-less/themes/material/globals/site.variables');
function fixFontPath(filename) {
var content = fs.readFileSync(filename, 'utf8');
var newContent = content.replace(
"#fontPath : '../../themes/",
"#fontPath : '../../../themes/"
);
fs.writeFileSync(filename, newContent, 'utf8');
}
We are going to make a custom theme.config file for Semantic UI. Hence change the path location in semantic-fix.js file as follows:
// ----------------------------------------------------
// File: web/static/lib/semantic-fix.js
// ----------------------------------------------------
// Old default code
fs.writeFileSync(
'node_modules/semantic-ui-less/theme.config',
"#import '../../src/semantic/theme.config';\n",
'utf8'
);
Replace it with following code:
// ----------------------------------------------------
// File: web/static/lib/semantic-fix.js
// ----------------------------------------------------
// Relocate default config
fs.writeFileSync(
'node_modules/semantic-ui-less/theme.config',
"#import '../../web/static/css/theme.config';\n",
'utf8'
);
I recently wrote an in-depth step-by-step tutorial to integrate Semantic UI framework with Elixir based Phoenix application and Webpack.
Add semantic-fix.js needs to run on every postinstall callback while installing npm packages. Hence we will place it as follows under package.json scripts section.
// ----------------------------------------------------
// File: package.json
// ----------------------------------------------------
{
...
"scripts": {
...
"postinstall": "node semantic-fix.js",
...
}
...
}
Now it's time to install Semantic UI LESS package. After the installation, the semantic-fix.js file will be called from the postinstall script.
npm install --save semantic-ui-less && node semantic-fix.js
After Semantic UI finishes installation, we need to copy the node_modules/semantic-ui-less/theme.config.example to web/static/css/theme.config.
cp node_modules/semantic-ui-less/theme.config.example web/static/css/theme.config
Override the existing paths to our paths
/* Path to site override folder */
#siteFolder : '../../web/static/css/site';
&
// #import "theme.less";
#import "~semantic-ui-less/theme.less";
Copy semantic LESS initialising file node_modules/semantic-ui-less/semantic.less to web/static/css. This file imports different component styles.
Change the locations for this file's import statements from #import "definitions/...."' to #import "~semantic-ui-less/definitions/...."
Similarly we need to add semantic.js file to web/static/js folder to import all JavaScript components as follows:
//---------------------------------------------
// File: web/statis/js/semantic.js
//---------------------------------------------
import 'semantic-ui-less/definitions/globals/site';
import 'semantic-ui-less/definitions/behaviors/api';
import 'semantic-ui-less/definitions/behaviors/colorize';
import 'semantic-ui-less/definitions/behaviors/form';
import 'semantic-ui-less/definitions/behaviors/state';
import 'semantic-ui-less/definitions/behaviors/visibility';
import 'semantic-ui-less/definitions/behaviors/visit';
import 'semantic-ui-less/definitions/modules/accordion';
import 'semantic-ui-less/definitions/modules/checkbox';
import 'semantic-ui-less/definitions/modules/dimmer';
import 'semantic-ui-less/definitions/modules/dropdown';
import 'semantic-ui-less/definitions/modules/embed';
import 'semantic-ui-less/definitions/modules/modal';
import 'semantic-ui-leKaabilss/definitions/modules/nag';
import 'semantic-ui-less/definitions/modules/popup';
import 'semantic-ui-less/definitions/modules/progress';
import 'semantic-ui-less/definitions/modules/rating';
import 'semantic-ui-less/definitions/modules/search';
import 'semantic-ui-less/definitions/modules/shape';
import 'semantic-ui-less/definitions/modules/sidebar';
import 'semantic-ui-less/definitions/modules/sticky';
import 'semantic-ui-less/definitions/modules/tab';
import 'semantic-ui-less/definitions/modules/transition';
import 'semantic-ui-less/definitions/modules/video';
web/static/js/app.js is the entry file in our webpack config. Hence we need to import all the files including Semantic UI files to app.js. Add the following lines at the end of app.js file
//---------------------------------------------
// File: web/statis/js/app.js
//---------------------------------------------
...
...
import "./semantic.js";
import '../css/semantic.less';
The integration is now complete and ready to run. Semantic UI is now completely intergrated with webpack and it's time to give it a try. Run the Phoenix server mix phoenix.server from project root. It should trigger webpack to compile all the files including semantic-ui - mix phoenix.server
This procedure is documented in more detail in my article (Linked on the top) which can be referred if there is any confusion.
Hope that helps.
It is quite easy to integrate Semantic UI LESS only Distribution with Phoenix application with a bit of a trick. I would suggest you to use Webpack instead of brunch/gulp as it is relatively popular with lot of plugins and easy to configure.
Before starting with the procedure, it is expected that the Phoenix App is installed with default Brunch build tool and it's working.
Integrating Webpack
Please follow my Semantic UI and Webpack integration detailed guide with detailed step by step procedure. This answer is in reference to this article.
Link: How to Integrate Your Phoenix Application with Semantic UI and Webpack
Integrating Semantic UI
Before we install Semantic UI, we need to put some configurations in place. We will create a new semantic-fix file.
vim web/static/lib/semantic-fix.js
Paste the following contents in the semantic-fix.js file which we just created. This file will take care of putting all Semantic UI assets in place for using it with our application
// ----------------------------------------------------
// File: web/static/lib/semantic-fix.js
// ----------------------------------------------------
var fs = require('fs');
// relocate default config
fs.writeFileSync(
'node_modules/semantic-ui-less/theme.config',
"#import '../../src/semantic/theme.config';\n",
'utf8'
);
// fix well known bug with default distribution
fixFontPath('node_modules/semantic-ui-less/themes/default/globals/site.variables');
fixFontPath('node_modules/semantic-ui-less/themes/flat/globals/site.variables');
fixFontPath('node_modules/semantic-ui-less/themes/material/globals/site.variables');
function fixFontPath(filename) {
var content = fs.readFileSync(filename, 'utf8');
var newContent = content.replace(
"#fontPath : '../../themes/",
"#fontPath : '../../../themes/"
);
fs.writeFileSync(filename, newContent, 'utf8');
}
We are going to make a custom theme.config file for Semantic UI. Hence change the path location in semantic-fix.js file as follows:
// ----------------------------------------------------
// File: web/static/lib/semantic-fix.js
// ----------------------------------------------------
// Old default code
fs.writeFileSync(
'node_modules/semantic-ui-less/theme.config',
"#import '../../src/semantic/theme.config';\n",
'utf8'
);
Replace it with following code:
// ----------------------------------------------------
// File: web/static/lib/semantic-fix.js
// ----------------------------------------------------
// Relocate default config
fs.writeFileSync(
'node_modules/semantic-ui-less/theme.config',
"#import '../../web/static/css/theme.config';\n",
'utf8'
);
I recently wrote an in-depth step-by-step tutorial to integrate Semantic UI framework with Elixir based Phoenix application and Webpack.
Add semantic-fix.js needs to run on every postinstall callback while installing npm packages. Hence we will place it as follows under package.json scripts section.
// ----------------------------------------------------
// File: package.json
// ----------------------------------------------------
{
...
"scripts": {
...
"postinstall": "node semantic-fix.js",
...
}
...
}
Now it's time to install Semantic UI LESS package. After the installation, the semantic-fix.js file will be called from the postinstall script.
npm install --save semantic-ui-less && node semantic-fix.js
After Semantic UI finishes installation, we need to copy the node_modules/semantic-ui-less/theme.config.example to web/static/css/theme.config.
cp node_modules/semantic-ui-less/theme.config.example web/static/css/theme.config
Override the existing paths to our paths
/* Path to site override folder */
#siteFolder : '../../web/static/css/site';
&
// #import "theme.less";
#import "~semantic-ui-less/theme.less";
Copy semantic LESS initialising file node_modules/semantic-ui-less/semantic.less to web/static/css. This file imports different component styles.
Change the locations for this file's import statements from #import "definitions/...."' to #import "~semantic-ui-less/definitions/...."
Similarly we need to add semantic.js file to web/static/js folder to import all JavaScript components as follows:
//---------------------------------------------
// File: web/statis/js/semantic.js
//---------------------------------------------
import 'semantic-ui-less/definitions/globals/site';
import 'semantic-ui-less/definitions/behaviors/api';
import 'semantic-ui-less/definitions/behaviors/colorize';
import 'semantic-ui-less/definitions/behaviors/form';
import 'semantic-ui-less/definitions/behaviors/state';
import 'semantic-ui-less/definitions/behaviors/visibility';
import 'semantic-ui-less/definitions/behaviors/visit';
import 'semantic-ui-less/definitions/modules/accordion';
import 'semantic-ui-less/definitions/modules/checkbox';
import 'semantic-ui-less/definitions/modules/dimmer';
import 'semantic-ui-less/definitions/modules/dropdown';
import 'semantic-ui-less/definitions/modules/embed';
import 'semantic-ui-less/definitions/modules/modal';
import 'semantic-ui-leKaabilss/definitions/modules/nag';
import 'semantic-ui-less/definitions/modules/popup';
import 'semantic-ui-less/definitions/modules/progress';
import 'semantic-ui-less/definitions/modules/rating';
import 'semantic-ui-less/definitions/modules/search';
import 'semantic-ui-less/definitions/modules/shape';
import 'semantic-ui-less/definitions/modules/sidebar';
import 'semantic-ui-less/definitions/modules/sticky';
import 'semantic-ui-less/definitions/modules/tab';
import 'semantic-ui-less/definitions/modules/transition';
import 'semantic-ui-less/definitions/modules/video';
web/static/js/app.js is the entry file in our webpack config. Hence we need to import all the files including Semantic UI files to app.js. Add the following lines at the end of app.js file
//---------------------------------------------
// File: web/statis/js/app.js
//---------------------------------------------
...
...
import "./semantic.js";
import '../css/semantic.less';
The integration is now complete and ready to run. Semantic UI is now completely intergrated with webpack and it's time to give it a try. Run the Phoenix server mix phoenix.server from project root. It should trigger webpack to compile all the files including semantic-ui - mix phoenix.server
This procedure is documented in more detail in my article (Linked on the top) which can be referred if there is any confusion.
Hope that helps.
I am getting started with Angular2.0. I have been following the 5 Min Quickstart and everything works fine although I am using grunt to compile my Typescript and some Sass etc.
I just have one problem I cant solve by myself. I want to move all the public files (generated Javascript and production node modules into a subdirectory. I need to have that, because I run different applications unter the same domian. The frontend depends on the user type that logged in. (backend is written with phalcon)
This is my public folder (the webserver's root)
So the whole Angular applications should live inside the "talent" directory.
The "index.html" contains the following:
<script type="text/javascript" src="/talent/node_modules/systemjs/dist/system.src.js"></script>
<script type="text/javascript" src="/talent/node_modules/angular2/bundles/angular2.dev.js"></script>
<script>
System.config({
baseURL: '/talent',
packages: {'app': {defaultExtension: 'js',}}
});
System.import('app/app');
</script>
SystemJs is able to load my app.js file correctly but then trys to import angular2:
import {bootstrap, Component} from 'angular2/angular2';
Corresponding Javascript:
var angular2_1 = require('angular2/angular2');
This sends a request to http://example.dev/talent/angular2/angular2 resulting in an 404 error.
When I move the node_modules folder and the app folder to the webserver's root and remove baseURL: '/talent' it works just fine.
Here are the requests made for both the working solution (everything at root) and the not working part (everything under /talent)
Working:
Not working:
Can you help me getting this to work?
Had this exact same problem, and just figured it out after several hours. The System config baseURL needs to be set BEFORE angular2.dev.js is loaded. This is because the System.register calls need to be aware of the baseURL at the time of registrations.
e.g.
System.config({ baseURL: '/talent' });
A cleaner way is to just add System.config({ baseURL: '/talent' }) to the very bottom of the system.src.js file.
You can set paths for each library :
System.paths = {
'angular2/*': '/talent/node_modules/angular2/*',
'app/*': '/talent/app/*'
};
Does this work for you?
'angular2/angular2' has been deprecated. Your code should reference 'angular2/core' or the appropriate module for your imports.
You should also not need to specify the path for the angular2 imports in your System.config as System will load them in from the <script> tag you have in the HTML.
You are most likely receiving the 404 error because the angular2.dev.js file is loading 'angular2/core', 'angular2/common', 'angular2/platform/browser', etc... and you are referencing 'angular2/angular2' which is not being registered and therefor SystemJS is attempting to go out and find it.
Change all of your import {...} from 'angular2/angular2' to the correct module import as well. You can find these on the API Preview page of angular.io, or hopefully your IDE will find it for you.
I don't know which version of Angular2 you use but now with beta versions you should use these Angular2 modules:
import {bootstrap} from 'angular2/platform/browser';
import {Component} from 'angular2/core';
Then you need to configure SystemJS as described below:
<script>
System.config({
map: {
app: 'talent/app'
},
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/boot')
.then(null, console.error.bind(console));
</script>
With this configuration, when trying to load the app/boot module, SystemJS will load the talent/app/boot.js file that was compiled before from the talent/app/boot.ts file. This behavior applies to all elements under the app module but not to other ones.
Modules like angular2/* will be found from files talent/node_modules/angular2/bundles/[something].js you included using <script> tags.
I made some tests and this configuration works for me ;-)
Thierry
I stumbled upon this question when trying to move from a local (dev) environment to a hosted server (CentOS) where the deployed URLs were all different to my local host. If you're in this situation and the accepted answer doesn't solve your problem (I was already importing the updated imports with Angular2 Beta 15) and using baseURL messes other things up (as it did in my situation) then use:
map: {
app: 'path/to/app/folder'
},
I saw this here and it worked for me (even though it was originally answering a MAMP environment question): Troubles with importing classes from Angular 2 modules with Typescript 1.7
Here's what worked for us:
Make the base ref point to the subdirectory containing the angular project. This will ensure that all the node_module dependencies are found, etc.
Configure the PathLocationStrategy with a different APP_BASE_HREF so that html5 mode still works for the actual angular app.
bootstrap(AppComponent, [..... bind(APP_BASE_HREF).toValue("/yardmap/planning")
ref: https://angular.io/docs/ts/latest/api/common/index/APP_BASE_HREF-let.html
ref: https://angular.io/docs/ts/latest/guide/router.html
base href
Most routing applications should add a element to the index.html as the first child in the tag to tell the router how to compose navigation URLs.
<!DOCTYPE html>
<html>
<head lang="en">
<base href="/talent/">
......
</head>