I use parcel to build a frontend app, this is the command I use for build
cross-env NODE_ENV=dev parcel build src/index.html --no-minify --out-dir dist/dev
to build production
cross-env NODE_ENV=production parcel build src/index.html --out-dir dist/production
In index.html there is as usual
<script src="app.js"></script>
Then in app.js
import settings from './settings.js'
I'd like to achieve something like
settings.js
if(process.env.NODE_ENV == 'dev') {
server = 'http://localhost:1235'
} else if (process.env.NODE_ENV == 'production') {
server = 'http://public-domain.com'
}
Related
I have a Svelte site white is uploaded to Gitlab.
I tried to deploy it to Netlfiy but I keep on getting the notification "Not Found" after I enter the build settings and select "Deploy site".
Below are my svelte.config.js and netlify.toml files:
svelte.config.js:
import adapter from '#sveltejs/adapter-netlify';
export default {
kit: {
adapter: adapter({
// if true, will split your app into multiple functions
// instead of creating a single one for the entire app
split: false
})
}
};
netlify.toml:
[build]
command = "npm run build"
publish = "build"
[context.production]
environment = { NODE_VERSION = "16.6.0" }
Why isn't it working?
I created a library with a demo page that I deployed it using Netlify (the url is something like my-lib.netflify.app) and it is associated with "build": "parcel build demo/index.html --out-dir demo-build",.
Then I add to my library a documentation page using documentationjs that using the command yarn docs:
"docs:html": "documentation build --config documentation.yml src/lib/**/*.ts --parse-extension ts --format html --output docs --favicon ../public/peacock-64.png",
"docs:md": "documentation build --config documentation.yml src/lib/**/*.ts --parse-extension ts --format md --output docs/docs.md",
"docs": "yarn docs:html && yarn docs:md"
creates this docs folder:
So what I want to deploy is the index.html page for example using an url like this my-lib-docs.netflify.app or whatever, it's not important.
How can I do that? Which command I have to use, how have to configure Netlify and/or documentationjs?
Thanks a lot!
You can set up a new site on Netlify, pointing at the same git repo, and give it the build and output directory setting you list in your question, and point the output at your subdomain.
Is possible to run gulp tasks from a UI page ?
Example: Having a web form or any type input and when you click on any button, to run a already defined and specific task(run build, compile sass, you name it.)
Thank you
Yes, you could. You just need to execute gulp taskname when needed. You would need an ajax request to a script that executes the gulp command. F.I., you can make a working example with this skeleton, using nodejs and express:
gulpfile
gulp.task('minify' , function(){
console.log('gulp called!');
gulp.src('scripts/src/test.js')
.pipe(minify() )
.pipe(gulp.dest('scripts/bin/'));
});
server.js
var express = require('express')
var app = express();
var exec = require('child_process').exec;
app.use(express.static('public'))
app.post('/send' , function(req , res){
console.log('this was called');
exec('gulp minify');
res.send('success!');
});
app.listen(3000, function () {
console.log('Example app listening on port 3000!');
});
public/index.html
<html>
<head>
</head>
<body>
<button onclick=send()>Execute gulp minify</button>
</body>
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script>
function send(){
$.ajax({
url : 'http://localhost:3000/send',
method : 'POST',
success : function(res){
console.log(res);
},
error : function(response){
console.log('Error!');
console.log(response);
}
});
}
</script>
</html>
package.json
{
"name": "gulp-from-script",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.14.0",
"gulp-uglify": "^2.0.0"
}
}
scripts/src/test.js
function test(){
console.log('this file should be minified to bin/test.js on click');
//end.
}
With that boilerplate, you can just install the dependencies
npm install
then serve:
node server.js
And then go to
localhost:3000/index.html
After clicking the button, a minified file should appear under /scripts/bin/test.js
Of course you need nodejs and npm installed on your system to get this to work. Is just a working example demonstrating how to do it, it could be done with any other server side technology, the only point is to call the gulpfile task from a post controller on your server side.
So, would this be useful for anything? As Sandrina Pereira states, gulp is a task runner meant for building the front-end assets of your project. You shouldn't call it from a script fired by a user of a web application.
However, you could set up this kind of system to create a local website or app under localhost/ to manage your builds, or perform any other task in your machine, from a UI. I don't know if that is just a good or desirable idea, but it is definitely doable.
Answer: I don't know, but if so, you shouldn't do it.
Why?: Gulp is meant to be a task runner on developing side, running and controlled by a shell (terminal /command line), not on web / browser side.
You can use React with Gulp. Web behaviour is handle on React side. You can easily learn React, there are a lot of documentation and tutorials. I like this one
I am trying to clone a Git repository, which contains an Ember-CLI project (https://github.com/tgfischer/StockMarketApp). When I do that, I get the following error:
tom#tom-fischer:~/Desktop/StockMarketApp$ ember server
version: 0.2.0-beta.1
Could not find watchman, falling back to NodeWatcher for file system events
Livereload server on port 35729
Serving on http://0.0.0.0:4200/
Object function glob(pattern, options, cb) {
if (typeof options === "function") cb = options, options = {}
if (!options) options = {}
if (typeof options === "number") {
deprecated()
return
}
var g = new Glob(pattern, options, cb)
return g.sync ? g.found : g
} has no method 'hasMagic'
TypeError: Object function glob(pattern, options, cb) {
if (typeof options === "function") cb = options, options = {}
if (!options) options = {}
if (typeof options === "number") {
deprecated()
return
}
var g = new Glob(pattern, options, cb)
return g.sync ? g.found : g
} has no method 'hasMagic'
at rimraf (/home/tom/Desktop/StockMarketApp/node_modules/ember-cli/node_modules/broccoli-caching-writer/node_modules/rimraf/rimraf.js:57:13)
at lib$rsvp$node$$tryApply (/home/tom/Desktop/StockMarketApp/node_modules/ember-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1467:11)
at lib$rsvp$node$$handleValueInput (/home/tom/Desktop/StockMarketApp/node_modules/ember-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1567:20)
at fn (/home/tom/Desktop/StockMarketApp/node_modules/ember-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1555:18)
at /home/tom/Desktop/StockMarketApp/node_modules/ember-cli/node_modules/broccoli-caching-writer/index.js:100:14
at lib$rsvp$$internal$$tryCatch (/home/tom/Desktop/StockMarketApp/node_modules/ember-cli/node_modules/promise-map-series/node_modules/rsvp/dist/rsvp.js:489:16)
at lib$rsvp$$internal$$invokeCallback (/home/tom/Desktop/StockMarketApp/node_modules/ember-cli/node_modules/promise-map-series/node_modules/rsvp/dist/rsvp.js:501:17)
at lib$rsvp$$internal$$publish (/home/tom/Desktop/StockMarketApp/node_modules/ember-cli/node_modules/promise-map-series/node_modules/rsvp/dist/rsvp.js:472:11)
at Object.lib$rsvp$asap$$flush [as _onImmediate] (/home/tom/Desktop/StockMarketApp/node_modules/ember-cli/node_modules/promise-map-series/node_modules/rsvp/dist/rsvp.js:1290:9)
at processImmediate [as _immediateCallback] (timers.js:330:15)
Here are the steps I am following:
git clone https://github.com/tgfischer/StockMarketApp
cd StockMarketApp
bower install
npm install
ember server
ember server runs the project, and generates the error above.
When I run the version of the project that is locally on my computer (The project that is pushing to this repository), it works correctly. I've tried uninstalling/reinstalling Bower, Ember-CLI, PhantomJS. I've also tried cloning this project on my Windows parition without success.
Does anyone know what might be going wrong? Thanks for the help.
Looks like a glob#4.5.1 issue I just fixed it changing the package.json
to use a version that was working for me
Instead of "glob": "^4.0.5" use "glob": "4.4.0"
Then reinstall you packages
npm cache clean
rm -rf node_modules
npm install
(ember-cli#0.2.0 works for me with the default glob version, you are using the 0.2.0-beta.1 maybe if you update ember-cli it will work)
Just to add to this solution, which did work for me, there is now a recommended solution available on GitHub for Ember-cli:
https://github.com/ember-cli/ember-cli/issues/3486
Upgrading to Ember-cli 0.2.0 should fix the problem, but if that's not an option you can add "rimraf": "2.2.8" to your package.json and freeze glob at 4.0.5.
Tried juan's answer but it didn't work in my case. This solution did though:
npm explore ember-cli -- npm i glob#latest -S
npm explore ember-cli -- npm i bower
Many thanks to https://stackoverflow.com/users/175117/thock for the help!
I am trying to use npm module fb to use facebook api. The config file is located in the module and here is the snapshot of the same
var config = { };
// should end in /
config.rootUrl = process.env.ROOT_URL || 'http://localhost:3000/';
config.facebook = {
appId: process.env.FACEBOOK_APPID || '130243393813697',
appSecret: process.env.FACEBOOK_APPSECRET || 'c82696768ae4ad8b63db874cb64eb558',
appNamespace: process.env.FACEBOOK_APPNAMESPACE || 'nodescrumptious',
redirectUri: process.env.FACEBOOK_REDIRECTURI || config.rootUrl + 'login/callback'
};
module.exports = config;
I don't wish to change the config file of the module since node_modules folder is kept in the gitignore list. For configuring the module to use my app's appId and appSecret, I need to set the process.env variables FACEBOOK_APPID and FACEBOOK_APPSECRET
I understand that it can be done while calling the sails lift but is it by any means possible to set these values inside the app so that I only have to call
sails lift
without any of those variables and those should be set automatically ? Or what is the best way to achieve what I am trying to do here ?
You should set the environment-variables outside of your App.
Instead of sails lift you could also use node app.js. With that you can define environment-variables for your node-application with:
$> FOO='bar' node app.js
In your case:
$> FACEBOOK_APPID='232322a22' FACEBOOK_APPSECRET='mysecrete' node app.js
If you want to set this vars in your app (I wouldn't suggest that!) you could set them before including your npm-module. For example in your config/bootstrap.js:
module.exports.bootstrap = function(cb) {
process.env.FACEBOOK_APPID = "myvar";
process.env.FACEBOOK_APPSECRET = "mysecrete";
sails.facebook = require("yourmodule");
cb();
};
Here is a good link for setting environment variables when "Production", "Staging" and "Development" in Sails feels fragmented.
Here is a quick video tutorial which simply explains how to create environment variables in node.js
Step1:
Install the package dotenv as dependency
$ npm install dotenv --save
Step2:
Then require dotenv in app.js and load the .env file
var dotenv = require('dotenv');
dotenv.load();
Step3:
Create a .env file in the root folder (ie. at the same document level as app.js file)
Step4:
Add your environment variables
S3_KEY=enfiownqefniqofewqofnieqwvewlk
S3_SECRET=123456789
Now you can access those environment variables anywhere in the app (probably in some config/ files):
return {
key: process.env.S3_KEY,
secret: process.env.S3_SECRET,
region: 's3-eu-west-1',
bucket: 'myBucket',
s3params: {
ACL: 'public-read'
}
}
Credit goes to Noah Bass for providing this tutorial.