How can I use the grunt-express for express 4.12? - express

I use the Express 4.12 to build my project and I want to use grunt-express to start my application. I have known that Express 4.12 start the application via node ./bin/www, so I write the Gruntfile.js like this:
express: {
dev: {
options: {
port: 3000,
bases: path.resolve('bin/'),
server: path.resolve('bin/www')
}
}
}
grunt.loadNpmTasks('grunt-express')
grunt.registerTask('default', ['express', 'express-keepalive']);
Unfortunately, when I run grunt, it reports an error:
Fatal error: Server should provide a function called "listen" that acts as http.Server.listen
But I found that in the www file, there is a function "listen":
var server = http.createServer(app)
server.listen(port);
I am confused about this. Could you please teach me write the Gruntfile.js
for the www file?

The grunt-express server option expects to see an express app, which is not what bin/www is. If you look at bin/www, what is it requiring for an express app? Eg, it should be an app.js in your project root, or maybe it would be server/index.js.
Also, your bases probably shouldn't be bin, rather it should be pointing to a public static resources dir, eg /public or if you have a build step that generates minified stuff it might be /dist.
Try this (editing server and bases to match your project):
grunt.initConfig({
express: {
options: {
port: 3000,
hostname: 'localhost'
},
dev: {
options: {
server: path.resolve('./app.js'),
bases: [path.resolve('./public')]
}
}
}
});

Related

How to use a CloudFlare Worker Environment Variable in Quasar? (Vue)

Hello & Happy New Year!
I am facing a problem in my Quasar (v1) app in regard to environment variables. I don't want to solve this using dotenv or any other Node package as these are no longer the recommended way to use environment variables in Quasar.
So I have some local environment variables I am setting/using, following the documented best practice on the Quasar official docs:
quasar.conf.js:
build: {
env: {
EXAMPLE: ctx.dev
? JSON.stringify('https://dev.')
: JSON.stringify('https://prod.')
},
This allows me to specify a different endpoint in dev and prod as I would expect, but not ideal for a few obvious reasons.
index.vue:
console.log(process.env.EXAMPLE,'<---API')
I get the expected output of my mock API endpoint. Good.
Now CloudFlare Workers' variables are globally scoped (No process.env object), so once configured in wrangler.toml, it should be possible to simply call them by name:
wrangler.toml:
[vars]
CFEXAMPLE = "example_token"
BUT this does not work (I cannot get my Quasar application to build if I include this as follows). Probably because CFEXAMPLE is not defined in my quasar.conf.js
quasar.conf.js:
build: {
env: {
CFEXAMPLE: CFEXAMPLE
},
I also cannot console.log CFEXAMPLE from my index.vue file either (but I CAN build my app and deploy to CloudFlare OK).
What is the best way to get environment variables working correctly across CloudFlare and localhost please?
Thanks
Ok so thanks to Michal for the hint. In the end I did this:
Firstly create an environment.js.
environment.js:
module.exports = {
dev:{
NODE_ENV: 'development',
PROXY_URL: 'xx',
}
},
prod:{
NODE_ENV: 'production',
PROXY_URL: 'zz',
}
}
}
Next import it and include a function to return the correct environmental var.
quasar.conf.js:
const config = require('./src/boot/environment.js')
module.exports = function(ctx) {
const getEnvVar = p => {
if (ctx.dev) return (config.dev[p])
else return (config.prod[p])
}
...
Finally add environment variables to env:
quasar.conf.js:
env:{
PROXY_URL:JSON.stringify(getEnvVar('PROXY_URL')),
POST_TO:JSON.stringify(getEnvVar('POST_TO')),
FIRESTORE_CREDS:JSON.stringify(getEnvVar('FIRESTORE_CREDS')),
},

How to use dotenv in SvelteKit project?

I'm trying to use dotenv.config() in a SvelteKit project.
I can run npm run build successfully. But when I try to start the server (using node build), it throws Error: Dynamic require of "fs" is not supported.
I tried to comment out the dotenv part in src/routes/test.js and build again, and this time the server started without any errors. (I created the project with npm init svelte#next without typescript, and except for the codes here, nothing else is changed)
How should I use dotenv here to load environment variables at runtime?
svelte.config.js
import node from '#sveltejs/adapter-node';
const config = {
kit: {
adapter: node(),
target: '#svelte'
}
};
export default config;
/src/routes/test.js
import dotenv from 'dotenv';
dotenv.config();
export function get() {
return {
body: {
test: process.env.TEST
}
}
}
.env
TEST=123
No need to explicitly load dotenv.
Vite uses dotenv
https://vitejs.dev/guide/env-and-mode.html#env-files
You can access your variable via import.meta.env.VITE_MY_VAR
Important is that your env variables must be prefixed with VITE_ in order to get them exposed. And if you are already running npm run dev, quit it and start again.
That worked for me.
Since a few weeks SvelteKit has a built-in way to handle environment variables:
https://kit.svelte.dev/docs/modules#$env-dynamic-private
I solved the problem with env-cmd (https://www.npmjs.com/package/env-cmd) by adding env-cmd to the beginning of svelte-kit dev, svelte-kit preview and node build.
Also, use process.env['TEST'] instead of process.env.TEST since process.env.TEST is replaced with ({}) by vite. (https://github.com/vitejs/vite/issues/3176)
This is what I did:
vite has a special config option for server port.
// import adapter from '#sveltejs/adapter-static';
import adapter from '#sveltejs/adapter-node';
import preprocess from 'svelte-preprocess';
import path from 'path';
import dotenv from 'dotenv-flow';
dotenv.config();
/** #type {import('#sveltejs/kit').Config} */
const config = {
// Consult https://github.com/sveltejs/svelte-preprocess
// for more information about preprocessors
preprocess: preprocess(),
kit: {
// hydrate the <div id="svelte"> element in src/app.html
// target: '#svelte',
/*
adapter: adapter({
// default options are shown
pages: 'build',
assets: 'build',
fallback: 'index.html'
}),
*/
adapter: adapter({
out: './build',
precompress: true
}),
vite: {
resolve: {
alias: {
$components: path.resolve('./src/components'),
$stores: path.resolve('./src/stores'),
$api: path.resolve('./src/api')
}
},
build: {
minify: true
},
server: {
port: process.env.PORT || 3000
}
}
}
};
export default config;
I have .env for defaults (dev etc) and .env.local that is ignored in .gitignore for production (keys, etc).
When .env.local is present it uses that port.
edit: this does not work with node-adapter in production. I think we need to declare PORT some other way. it only works with npm run dev

Nuxt static generated page and axios post

I have a Nuxt project. Everything is OK when I generate a static page.
However, I need to send a POST request to the other server.
I tried to use both a proxy in nuxt.config.js and just direct query, but after deploy to the ngnix eventually, nothing works.
Please help.
UPDATE. Steps to reproduce.
Create Nuxt App including axios and proxy
Configure your proxy for other webservice:
proxy: {
'/api': {
target: 'http://example.com:9000',
pathRewrite: {
'^/api': '/',
},
},
changeOrigin: true,
},
call this service somewhere in the code:
const result = await this.$axios.post('/api/email/subscribe', {email: email})
run "yarn dev" and test the service. It works locally properly.
run 'nuxt generate' and deploy the static code hosting service, for example, hosting.com
run your page which calls the above-mentioned service.
As a result, instead of making POST call to the hosting.com/api/email/subscribe, it calls localhost:3000/api/email/subscribe.
Be sure to install the nuxt versions of axios and proxy in your project #nuxt/axios and #nuxtjs/proxy
after that in your nuxt.config.js add axios as module plus this options for axios and proxy:
modules: [
// Doc: https://axios.nuxtjs.org/usage
'#nuxtjs/axios',
//more modules if you need
],
/*
** Axios module configuration
*/
axios: {
proxy: true,
// See https://github.com/nuxt-community/axios-module#options
},
proxy: {
'/api/': {
target: process.env.AXIOS_SERVER, // I use .env files for the variables
pathRewrite: { '^/api/': '' }, //this should be your bug
},
},
now you can use axios in any part of the code like this
const result = await this.$axios.post('/api/email/subscribe', {email: email})
it will internally resolve to AXIOS_SERVER/email/subscribe without cause cors issues.
EXTRA: test enviroments in local using multiples .env files
you can configure .env for dev and .env.prod for production, after that in local you can use yarn build && yarn start for test your app with your production enviroment. You only need add this at the top of your nuxt.config.js file
const fs = require('fs')
const path = require('path')
if (process.env.NODE_ENV === 'production' && fs.existsSync('.env.prod')) {
require('dotenv').config({ path: path.join(__dirname, `.env.prod`) })
} else {
require('dotenv').config()
}
By definition on the Nuxt docs page what nuxt generate does is: Build the application and generate every route as a HTML file (used for static hosting).
Therefore, using proxy is out of question here. Take note that you path is not even being rewritten.
And probably the result you're looking for is not hosting.com/api/email/subscribe (wit /api), but hosting.com/email/subscribe.
Nevertheless, if you use nginx then I don't think you should use Nuxt's proxy option. Nginx is built just for that so point your API calls there and in nginx config file just declare where it should point further.

Using browser-sync with vue js and framework7

I have created a PWA using vue js 2.0 and framework7 and also use Webpack for bundling. I want to use browser-sync to share my project.
I used this config in my webpack.confg file :
new BrowserSyncPlugin({
// browse to http://localhost:3000/ during development,
// ./public directory is being served
host: 'localhost,
port: 3000,
server: { baseDir: ['src'] }
}),
In src/ I have my basic files like index.html, app.vue, app.js.
After using npm run dev command I see this result :
[Browsersync] Access URLs:
----------------------------------
Local: http://localhost:3000
External: http://192.168.1.118::3000
----------------------------------
UI: http://localhost:3001
UI External: http://localhost:3001
----------------------------------
[Browsersync] Serving files from: src
After this, localhost:3000 open in my browser and say browsersync: connected but it have showed me a blank page.
Also after I enter website path (http://localhost:3000/en/#!/login) in browser, it showed me Cannot Get /en Error. What is the problem?
Any help will greatly appreciated.
Based on your comment, looks like you are also using webpack-dev-server. In that case you can proxy to it:
const BrowserSyncPlugin = require('browser-sync-webpack-plugin')
module.exports = {
// ...
devServer: {
port: 3100
}
// ...
plugins: [
new BrowserSyncPlugin(
// BrowserSync options
{
// browse to http://localhost:3000/ during development
host: 'localhost',
port: 3000,
// proxy the Webpack Dev Server endpoint
// (which should be serving on http://localhost:3100/)
// through BrowserSync
proxy: 'http://localhost:3100/'
},
// plugin options
{
// prevent BrowserSync from reloading the page
// and let Webpack Dev Server take care of this
reload: false
}
)
]
}

Browser reloaded before server with grunt-express-server and grunt-contrib-watch

I am trying to use grunt-contrib-watch together with grunt-express-server to reload my express server and the browser page whenever I made changes to the javascript files. The problem I am having is that the page reloads before the server is ready, so I get a "can't establish a connection to the server at localhost:3000."
Here is my Gruntfile.js:
module.exports = function(grunt) {
'use strict';
grunt.initConfig({
express: {
dev: {
options: {
script: 'gui-resources/scripts/js/server.js'
}
}
},
watch: {
express: {
files: ['gui-resources/scripts/js/**/*.js'],
tasks: ['express:dev'],
options: {
livereload: true,
spawn: false
}
}
}
});
// Load all grunt tasks declared in package.json
require('load-grunt-tasks')(grunt);
grunt.registerTask('default', ['express:dev', 'watch'])
};
In my server.js file I start the server with:
var port = 3000;
app.listen(port, function() {
console.log('Listening on port %d', port);
});
I found this similar question, but the solution proposed there doesn't apply on my case, since I am logging some output when the server is started, but the race condition appears anyway.
Update:
If I remove 'spawn: false' from watch:express config, everything works but express logs an error when started:
Error: listen EADDRINUSE
at errnoException (net.js:878:11)
at Server._listen2 (net.js:1016:14)
at listen (net.js:1038:10)
at Server.listen (net.js:1104:5)
at Function.app.listen (/Users/pat/projects/sourcefabric/plugin-liveblog-embed-server/node_modules/express/lib/application.js:533:24)
at /Users/pat/projects/sourcefabric/plugin-liveblog-embed-server/gui-resources/scripts/js/server.js:86:13
at Object.context.execCb (/Users/pat/projects/sourcefabric/plugin-liveblog-embed-server/node_modules/requirejs/bin/r.js:1890:33)
at Object.Module.check (/Users/pat/projects/sourcefabric/plugin-liveblog-embed-server/node_modules/requirejs/bin/r.js:1106:51)
at Object.<anonymous> (/Users/pat/projects/sourcefabric/plugin-liveblog-embed-server/node_modules/requirejs/bin/r.js:1353:34)
at /Users/pat/projects/sourcefabric/plugin-liveblog-embed-server/node_modules/requirejs/bin/r.js:372:23
Strange enough, in spite of the error the server and the page reload correctly.
Here is my code (the real Gruntfile is bigger, but I removed the parts not related to watch or express to make the question more readable).
I think you should be able to use the debounceDelay option with livereload to wait a bit longer until your server is ready:
watch: {
express: {
files: ['gui-resources/scripts/js/**/*.js'],
tasks: ['express:dev'],
options: {
livereload: true,
spawn: false,
debounceDelay: 1000 // in milliseconds
}
}
}