I am new to vite and I can't figure out how to get it to build my entire project instead of just my index.html page. I run "npm run build" and every time it just does that index.html but in npm run dev it works fine. I have all my files on the same level as in the picture. How do I resolve this problem?
Create a vite.config.js file at the root of project and put this in it
const { defineConfig } = require('vite')
module.exports = defineConfig({
build: {
rollupOptions: {
input: {
main: './index.html',
about: './about.html',
shaderOne: './shaderOne.html',
// ...
// List all files you want in your build
}
}
}
})
If not, you will need to install vite locally. You can install it using npm install vite
See this documentation
Related
I understand that the purpose of ember-cli-eslint, ember-cli-stylelint to run automatically.
I am wondering if there is a way to control this behavior.
Like, run ember-cli-eslint, ember-cli-stylelint automatically only if there is certain ENVIRONMENT_VARIABLE or maybe write a custom script.
I am wondering if that is possible. Google search did not provide me any pointer.
Yes.
For ESLint:
Remove the addon ember-cli-eslint
Install the npm package eslint in your project
ESLint will then run only when you actually run ./node_modules/.bin/eslint .
You should update your package.json's lint:js script as well.
For Stylelint:
Remove the addon ember-cli-stylelint
Install the npm package stylelint in your project
Stylelint will then run only when you actually run ./node_modules/.bin/stylelint
You should update your package.json's lint:css script as well.
As suggested by #Turbo87 at https://github.com/ember-cli/ember-cli-eslint/issues/333 I have updated ember-cli-build.js like so:
const blacklist = [];
if (process.env.DISABLE_AUTO_LINT) {
blacklist.push('ember-cli-eslint', 'ember-cli-eslint');
}
let app = new EmberApp(defaults, {
addons: { blacklist },
});
And it works as desired.
A simplified package.json/script looks something like so:
"scripts": {
"eslint": "eslint .",
"stylelint": "stylelint app/styles",
"lint": "npm run eslint && npm run stylelint",
"start": "DISABLE_AUTO_LINT=true ember serve",
"test": "npm run lint --silent && DISABLE_AUTO_LINT=true ember exam --split=10 --parallel",
}
ember serve functions as business as usual.
I am attempting to make two AWS Lambda functions (written in typescript). Both of these functions share the same code for interacting with an API. In order to not have to copy the same code to two different Lambdas, I would like to move my shared code to a local module, and have both my Lambdas depend on said module.
My initial attempt at staring code between the two lambdas was to use a monorepo and lerna. My current project structure looks like this:
- lerna.json
- package.json
- packages
- api
- package.json
- lambdas
- funcA
- package.json
- func B
- package.json
lerna.json:
{
"packages": [
"packages/api",
"packages/lambdas/*"
],
"version": "1.0.0"
}
In each of my package.json for my Lambda functions, I am able to include my local api module as such:
"dependencies": {
"#local/api": "*"
}
With this, I've been able to move the common code to its own module. However, I'm now not sure how to bundle my functions to deploy to AWS Lambda. Is there a way for lerna to be able to create a bundle that can be deployed?
As cp -rL doesn't work on the mac I had to come up with something similar.
Here is a workflow that works if all of your packages belong to one scope (#org):
In the package.json of your lerna repo:
"scripts": {
"deploy": "lerna exec \"rm -rf node_modules\" && lerna bootstrap -- --production && lerna run deploy && lerna bootstrap"
}
In the package that contains your lambda function:
"scripts":{
"deploy": "npm pack && tar zxvf packagename-version.tgz && rm -rf node_modules/#org && cp -r node_modules/* package/node_modules && cd package && npm dedupe"
}
Now replace "packagename-version" and "#org" with the respective values of your project. Also add all of the dependent packages to "bundledDependencies".
After running npm run deploy in the root of your lerna mono repo you end up with a folder "package" in the package that contains your lambda function. It has all the dependencies needed to run your function. Take it from there.
I had hoped that using npm pack would allow me to utilize .npmignore files but it seems that that doesn't work. If anyone has an idea how to make it work let me know.
I have struggled with this same problem for a while now, and I was finally forced to do something about it.
I was using a little package named slice-node-modules, as found here in this similar question, which was good enough for my purposes for a while. As I have consolidated more of my projects into monorepos and begun using shared dependencies which reside as siblings rather than being externally published, I ran into shortcomings with that approach.
I've created a new tool called lerna-to-lambda which was specifically tailored to my use case. I published it publicly with minimal documentation, hopefully enough to help others in similar situations. The gist of it is that you run l2l in your bundling step, after you've installed all of your dependencies, and it copies what is needed into an output directory which is then ready to deploy to Lambda using SAM or whatever.
For example, from the README, something like this might be in your Lambda function's package.json:
"scripts": {
...
"clean": "rimraf build lambda",
"compile": "tsc -p tsconfig.build.json",
"package": "l2l -i build -o lambda",
"build": "yarn run clean && yarn run compile && yarn run package"
},
In this case, the compile step is compiling TypeScript files from a source directory into JavaScript files in the build directory. Then the package step bundles up all the code from build along with all of the Lambda's dependencies (except aws-sdk) into the directory lambda, which is what you'd deploy to AWS. If someone were using plain JavaScript rather than TypeScript, they could just copy the necessary .js files into the build directory before packaging.
I realize this question is over 2 years old, and you've probably figured out your own solutions and/or workarounds since then. But since it is still relevant to me, I assume it's still relevant to someone out there, so I am sharing.
Running lerna bootstrap will create a node_modules folder in each "package". This will include all of your lerna managed dependencies as well as external dependencies for that particular package.
From then on, your deployment of each lambda will be agnostic of the fact that you're using lerna. The deployment package will need to include the code for that specific lambda and the node_modules folder for that lambda - you can zip these and upload them manually, or use something like SAM or CloudFormation.
Edit: as you rightly point out you'll end up with symlinks in your node_modules folder which make things awkward to package up. To get around this, you could run something like this prior to packaging for deployment:
cp -rL lambdas/funcA/node_modules lambdas/funcA/packaged/node_modules
The -L will force the symlinked directories to be copied into the folder, which you can then zip.
I have used a custom script to copy the dependencies during the install process.. This will allow me to develop and deploy the application with the same code.
Project structure
In the package.json file of the lambda_a, I have the following line:
"scripts": {
"install": "node ./install_libs.js #libs/library_a"
},
#libs/library_a can be used by the lambda code using the following statement:
const library_a = require('#libs/library_a')
for SAM builds, I use the following command from the lmbdas frolder:
export SAM_BUILD=true && sam build
install_libs.js
console.log("Starting module installation")
var fs = require('fs');
var path = require('path');
var {exec} = require("child_process");
if (!fs.existsSync("node_modules")) {
fs.mkdirSync("node_modules");
}
if (!fs.existsSync("node_modules/#libs")) {
fs.mkdirSync("node_modules/#libs");
}
const sam_build = process.env.SAM_BUILD || false
libs_path = "../../"
if (sam_build) {
libs_path = "../../" + libs_path
}
process.argv.forEach(async function (val, index, array) {
if (index > 1) {
var currentLib = libs_path + val
console.log(`Building lib ${currentLib}`)
await exec(`cd ${currentLib} && npm install` , function (error, stdout, stderr){
if (error) {
console.log(`error: ${error.message}`);
return;
}
console.log(`stdout: ${stdout}`);
console.log('Importing module : ' + currentLib);
copyFolderRecursiveSync(currentLib, "node_modules/#libs")
});
}
});
function copyFolderRecursiveSync(source, target) {
var files = [];
// Check if folder needs to be created or integrated
var targetFolder = path.join(target, path.basename(source));
if (!fs.existsSync(targetFolder)) {
fs.mkdirSync(targetFolder);
}
// Copy
if (fs.lstatSync(source).isDirectory()) {
files = fs.readdirSync(source);
files.forEach(function (file) {
var curSource = path.join(source, file);
if (fs.lstatSync(curSource).isDirectory()) {
copyFolderRecursiveSync(curSource, targetFolder);
} else {
copyFileSync(curSource, targetFolder);
}
});
}
}
function copyFileSync(source, target) {
var targetFile = target;
// If target is a directory, a new file with the same name will be created
if (fs.existsSync(target)) {
if (fs.lstatSync(target).isDirectory()) {
targetFile = path.join(target, path.basename(source));
}
}
fs.writeFileSync(targetFile, fs.readFileSync(source));
}
I'm using ember-cli v0.0.23, and am trying to get the broccoli-compass package working with my project, and I've run into some problems.
First, in my Brocfile, I have replaced the standard Ember-CLI "blueprint" version of:
var styles = preprocessCss(appAndDependencies, prefix + '/styles', '/assets');
with the following:
var compileCompass = require('broccoli-compass');
var styles = compileCompass(appAndDependencies, 'app/styles/app.scss', {
outputStyle: 'expanded',
sassDir: 'app/styles',
imagesDir: 'public/images/'
});
However, when I run an ember build, I receive the following output:
$ ember build
[broccoli-compass] Error: Command failed: Errno::ENOENT on line ["155"] of /Library/Ruby/Gems/2.0.0/gems/compass-0.12.6/lib/compass/compiler.rb: No such file or directory - /Users/gaker/Sites/project/tmp/tree_merger-tmp_dest_dir-GrWa8Zva.tmp/app/styles/app.scss
Run with --trace to see the full backtrace. The command-line arguments was: `compass compile app/styles/app.scss --relative-assets --sass-dir app/styles --output-style expanded --images-dir public/images/ --css-dir "../compass_compiler-tmp_dest_dir-eFsq51BG.tmp"`
If I try to run the compass command that is output in the error in my terminal, it does create the file, only it is up one directory from my project root (notice --css-dir in the output).
I have tried many combinations of options sassDir, imagesDir, etc when calling compileCompass and this is the closest I've gotten.
So any ideas on what I can do to successfully get compass, broccoli-compass and ember-cli playing nicely?
Thanks in advance
You can use ember-cli-compass-compiler addon to compile compass in ember-cli apps.
Just do the following in your ember-cli app:
npm install --save-dev ember-cli-compass-compiler
This is all you need to do, everything works as expected from now on. It compiles your appname.scss file into appname.css on ember build or ember serve command.
Try this (added prefix and cssDir):
var compileCompass = require('broccoli-compass');
var styles = compileCompass(appAndDependencies, prefix + '/styles/app.scss', {
outputStyle: 'expanded',
sassDir: prefix + '/styles',
imagesDir: 'public/images/',
cssDir: '/assets'
});
Steffen
I want to install and configure DoctrineFixturesBundle and doctrine-fixtures in Symfony 2.1.4. Can anyone give me a guide.
Your question may be already in answered in DoctrineFixturesBundle issues section, anyway I will summarize the steps to install and configure DoctrineFixturesBundle in symfony 2.1.4 version.
Step 1 :
Open the composer.json and append below code in require section. This file is located in root folder of the project
{
"require": {
"doctrine/doctrine-fixtures-bundle": "dev-master",
"doctrine/data-fixtures": "dev-master"
}
}
Step 2:
Run below command in your terminal
php composer.phar update
Final Step:
append the below in your app/AppKernel.php
// ...
public function registerBundles()
{
$bundles = array(
// ...
new Doctrine\Bundle\FixturesBundle\DoctrineFixturesBundle(),
// ...
);
// ...
}
Hope it helps.
I'm working on a project that uses coffeescript for development and testing. I run the tests in node with mocha's --watch flag on so I can have the tests run automatically when I make changes.
While this works to some extent, only the ./test/test.*.coffee files are recompiled when something is saved. This is my directory structure:
/src/coffee
-- # Dev files go here
/test/
-- # Test files go here
The mocha watcher responds to file changes inside the /src and /test directories, but as long as only the files in the /test directory are recompiled continuous testing is kind of borked. If I quit and restart the watcher process the source files are also recompiled. How can I make mocha have the coffee compiler run over the development files listed as dependencies inside the test files on each run?
Here is my answer using grunt.js
You will have to install grunt and few additionnal packges.
npm install grunt grunt-contrib-coffee grunt-simple-mocha grunt-contrib-watch
And write this grunt.js file:
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-contrib-coffee');
grunt.loadNpmTasks('grunt-simple-mocha');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.initConfig({
coffee:{
dev:{
files:{
'src/*.js':'src/coffee/*.coffee',
}
},
test:{
files:{
'test/test.*.js':'test/test.*.coffee'
}
}
},
simplemocha:{
dev:{
src:"test/test.js",
options:{
reporter: 'spec',
slow: 200,
timeout: 1000
}
}
},
watch:{
all:{
files:['src/coffee/*', 'test/*.coffee'],
tasks:['buildDev', 'buildTest', 'test']
}
}
});
grunt.registerTask('test', 'simplemocha:dev');
grunt.registerTask('buildDev', 'coffee:dev');
grunt.registerTask('buildTest', 'coffee:test');
grunt.registerTask('watch', ['buildDev', 'buildTest', 'test', 'watch:all']);
};
Note: I didn't have some detials on how you build / run your tests so you certainly have to addapt ;)
Then run the grunt watch task :
$>grunt watch
Using a Cakefile with flour:
flour = require 'flour'
cp = require 'child_process'
task 'build', ->
bundle 'src/coffee/*.coffee', 'lib/project.js'
task 'watch', ->
invoke 'build'
watch 'src/coffee/', -> invoke 'build'
task 'test', ->
invoke 'watch'
cp.spawn 'mocha --watch', [], {stdio: 'inherit'}
Mocha already watches the test/ folder, so you only need to watch src/.