How to use PM2 Process Manager with SvelteKit - environment-variables

I am trying to manage my SvelteKit build with PM2 (Process Manager) — my problem is that I can't succesfully inject a .env-file using an ecosystem.config.cjs. My files currently look like this:
.env.production
PORT=3000
The only changing thing in both configs is at:
env: { }
ecosystem.config.cjs (working fine - app runs on provided port)
module.exports = {
apps: [
{
name: 'my_app',
script: './build/index.js',
watch: false,
ignore_watch: ['database'],
autorestart: true,
// --------------------------------------------------
// if passed directly PORT is being used as expected:
// --------------------------------------------------
env: {
PORT: 3000
}
}
]
};
ecosystem.config.cjs (not working - injected PORT variable is being ignored)
module.exports = {
apps: [
{
name: 'my_app',
script: './build/index.js',
watch: false,
ignore_watch: ['database'],
autorestart: true,
// ----------------------------------------------------
// when I try to inject a .env it's just being ignored:
// ----------------------------------------------------
env: {
ENV_PATH: "./.env.production",
}
}
]
};
Any help is much appreciated and thanks for reading!
Cheers,
Boris
EDIT: Made question a bit more clear + added answer below

The problem wasn't the injection of .env.production, but the PORT environment variable. PORT must be provided directly and can't be part of .env.production (well, it can be but will be ignored).
There's probably another way, but the following works:
ecosystem.config.cjs
module.exports = {
apps: [
{
name: 'my_app',
script: './build/index.js',
watch: false,
ignore_watch: ['database'],
autorestart: true,
// ----------------------------------------------------
// when I try to inject a .env it's just being ignored:
// ----------------------------------------------------
env: {
PORT: 3000,
ENV_PATH: "./.env.production",
}
}
]
};
.env.production
# production
PUBLIC_test=value

Related

How Can I Reference Environment Variables in serverless.ts?

I'm using serverless-ssm-fetch in my serverless.ts file, which resolves many of the variables that are environment specific. This works great when I'm referencing these variables in my code, however, I have two values in my serverless.ts file itself that I'd like to draw from SSM Parameter Store. Below is my serverless.ts file, and what I'm trying to do to pull in lambda-security-group-ids and lambda-subnet-ids is working, but I'm not sure how to reference them within the serverless.ts file. Does anyone know how to do this?
import type { AWS } from '#serverless/typescript';
import importFacility from '#functions/ImportFacility';
import ProcessEvent from '#functions/ProcessEvent';
const serverlessConfiguration: AWS = {
service: 'myservice',
frameworkVersion: '2',
custom: {
webpack: {
webpackConfig: './webpack.config.js',
includeModules: true,
},
bundle: {
ignorePackages: ['pg-native']
},
serverlessSsmFetch: {
DB_Host: 'database-host~true',
PORT: 'serverless-database-port~true',
DB_NAME: 'clinical-database-name~true',
DB_USER_NAME: 'database-username~true',
DB_PASSWORD: 'database-password~true',
AWS_ACCESS_KEY: 'serverless-access-key-id~true',
AWS_SECRECT_KEY: 'serverless-access-key-secret~true',
LAMBDA_SECURITY_GROUP_IDS: 'lambda-security-group-ids~true', // WANT TO REFERENCE
LAMBDA_SUBNET_IDS: 'lambda-subnet-ids~true' // WANT TO REFERENCE
}
},
plugins: ['serverless-webpack', 'serverless-ssm-fetch'],
provider: {
name: 'aws',
runtime: 'nodejs14.x',
apiGateway: {
minimumCompressionSize: 1024,
shouldStartNameWithService: true,
},
environment: {
AWS_NODEJS_CONNECTION_REUSE_ENABLED: '1'
},
lambdaHashingVersion: '20201221',
vpc: {
securityGroupIds: [`${process.env.LAMBDA_SECURITY_GROUP_IDS}`], // NOT WORKING
subnetIds: [`${process.env.LAMBDA_SUBNET_IDS}`] // NOT WORKING
}
},
functions: { importFacility, ProcessEvent },
};
module.exports = serverlessConfiguration;
For anyone wondering juste had the issue
the syntax :
vpc: {
securityGroupIds: ['${ssm:${self:custom.serverlessSsmFetch.LAMBDA_SECURITY_GROUP_IDS}}'],
subnetIds: ['${ssm:${self:custom.serverlessSsmFetch.LAMBDA_SUBNET_IDS}}]
}
worked for me.
As far as I understand you have to use the syntax as it would have been rendered while using serverless.yml template

how to share rollup config files

I have 2 rollup config files which has some common parts and uncommon parts:
// rollup.config.umd.js
export config {
external: ['invariant', 'lodash'],
globals: {
invariant: 'invariant'
},
input: 'src/index.js',
name: 'my.comp',
output: {
file: 'my.comp.umd.js'
format: 'umd'
}...
and another file
// rollup.config.esm5.js
export config {
external: ['invariant', 'lodash'],
globals: {
invariant: 'invariant'
},
input: 'src/index.js',
name: 'my.comp',
output: {
file: 'my.comp.es5.js'
format: 'es'
}...
How do I keep these config files DRY ?
Not keeping DRY has following problems e.g. Imagine many external dependencies - if one forgets to add a new dependency in one place we are in trouble.
(I also use some different set of plugins etc and plugin configs but say that is out of scope of this problem.)
Firstly, they're just JavaScript modules, so you can always do this sort of thing:
// rollup.config.common.js
export default {
external: ['invariant', 'lodash'],
globals: {
invariant: 'invariant'
},
input: 'src/index.js',
name: 'my.comp'
};
// rollup.config.esm5.js
import common from './rollup.config.common.js';
export default Object.assign({
output: {
file: 'my.comp.es5.js'
format: 'es'
}
}, common);
// rollup.config.umd.js
import common from './rollup.config.common.js';
export default Object.assign({
output: {
file: 'my.comp.umd.js'
format: 'umd'
}
}, common);
But the real answer here is to combine the two configs into a single one like so:
export default {
external: ['invariant', 'lodash'],
globals: {
invariant: 'invariant'
},
input: 'src/index.js',
name: 'my.comp',
output: [
{
file: 'my.comp.es5.js'
format: 'es'
},
{
file: 'my.comp.umd.js'
format: 'umd'
}
]
};
As well as being simpler and easier to maintain, this will be faster, because Rollup can save doing a lot of the work twice.
If you need to change more than the output option between builds, you can also export an array of configs from a single file (export default [...]).

Webpack2 cannot resolve: config.context absolute path

I am trying to run my webpack config file (see below), but I am still getting certain type of errors that reffers to a paths I use in my webpack settings:
- config.context
- config.module.rules
- config.output
My idea was, that I set up my config.context path absolutely (as it is written in docs), otherwise my webpack.config files reffers to node_modules in parents directory. But still, when I run webpack -w --env.dev command, it throws following errors:
It seems to me, that config.context cant handle absolute path as it should. Any help how to set up paths correctly? Thank you!
My webpack.config.js:
var path = require('path');
var webpack = require('webpack');
var ExtractText = require('extract-text-webpack-plugin');
module.exports = function (env) {
var project = {
env: env.prod ? 'prod' : 'dev',
jsBase: './routesMap/',
cssBase: './src/css/'
}
var config = {
context: path.resolve(__dirname),
entry: {
'routesMap': project.jsBase + 'main.js'
},
output: {
path: path.join(__dirname, '/dist'),
filename: '[name].js'
},
plugins: [
new ExtractText({
filename: 'styles.min.css',
disable: false,
allChunks: true
})
],
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
include: path.join(__dirname, '/routesMap'),
exclude: /node_modules/,
query: {
cacheDirectory: true,
presets: ['es2015'],
plugins: ["transform-runtime"]
}
}
]
}
};
return config;
}
That's an issue with the latest webpack version. Try using uppercase drive letters in shell, e.g. C:/ instead c:/.
More info https://github.com/webpack/webpack/issues/4530.
I uninstalled latest webpack version (I had webpack 2.3.0) and installed version of 2.2.0, problem solved! As #zemirco stated in his answer, it has something to do with casesensitive letters in absolute path. Unfortunatelly changing small letter to big one doesnt help for me, so I just changed webpack version.

Grunt Livereload + Grunt Connect Proxy

I am using Rails for my API, AngularJS on the front and I am having some issues getting livereload / grunt connect proxy to work properly.
Here is the snippet from my gruntfile:
connect: {
options: {
port: 9000,
// Change this to '0.0.0.0' to access the server from outside.
hostname: 'localhost',
livereload: 35729
},
proxies: [
{
context: '/api',
host: 'localhost',
port: 3000
}
],
livereload: {
options: {
open: true,
base: [
'.tmp',
'<%= yeoman.app %>'
],
middleware: function (connect, options) {
var middlewares = [];
var directory = options.directory || options.base[options.base.length - 1];
// enable Angular's HTML5 mode
middlewares.push(modRewrite(['!\\.html|\\.js|\\.svg|\\.css|\\.png$ /index.html [L]']));
if (!Array.isArray(options.base)) {
options.base = [options.base];
}
options.base.forEach(function(base) {
// Serve static files.
middlewares.push(connect.static(base));
});
// Make directory browse-able.
middlewares.push(connect.directory(directory));
return middlewares;
}
}
},
test: {
options: {
port: 9001,
base: [
'.tmp',
'test',
'<%= yeoman.app %>'
]
}
},
dist: {
options: {
base: '<%= yeoman.dist %>'
}
}
}
If I 'grunt build' everything works perfectly - off localhost:3000
However if I 'grunt serve' it opens a window through 127.0.0.1:9000 and I get 404 to all my API calls.
Also under serve it is mangling my background images from a CSS file I get this warning:
Resource interpreted as Image but transferred with MIME type text/html: "http://127.0.0.1:9000/images/RBP_BG.jpg"
I haven't done this before - so chances are I am doing it all wrong.
I don't like too much code in your connect.livereload.middleware configuration.
Is that all necessary ?
Take a look at this commit - chore(yeoman-gruntfile-update): configured grunt-connect-proxy in some of my projects.
backend is Django
ports: frontend: 9000, backend: 8000
generator-angular was in v.0.6.0 when generating the project
my connect.livereload.middleware configuration was based on: https://stackoverflow.com/a/19403176/1432478
This is an old post, but please make sure that you actually initialize the proxy in the grunt serve task by calling configureProxies before livereload.
grunt.task.run([
'clean:server',
'bower-install',
'concurrent:server',
'autoprefixer',
'configureProxies',
'connect:livereload',
'watch'
]);
Should work fine afterwards.
I have a similar problem with you but I have no use yeoman.
My solution is to add the task 'configureProxies'.
this is my tasks:
grunt.registerTask('serve', ['connect:livereload','configureProxies',
'open:server', 'watch']);
and,'connect:livereload','configureProxies'——After my test, the order of these two tasks will not affect the results.
github grunt-connect-proxy

Disable LiveReload with Yeoman

When testing in IE8, LiveReload throws errors since web sockets is not supported. Is there a way to configure yeoman to disable LiveReload?
IE8 isn't supported by Yeoman, for good reason.
However, you could do what Allan describes, or you could override the server task, by putting this in your Gruntfile:
grunt.registerTask('server', 'yeoman-server');
Try to use <!--[if !IE]><!--></body><!--<![endif]--><!--[if IE]></body><!--<![endif]--> instead of </body>.
Generator would try to replace first </body> element and add livereload snippet before it, so code would be placed in invisible for IE space.
P.S. It`s dirty hack so use this carefuly
Put this in your Gruntfile:
grunt.registerHelper('reload:inject', function () {
return function inject(req, res, next) {
return next();
}});
Yes there is one I know.
Go to your project folder and find the file Gruntfile.js
Open the file in a editor
Remove the reload: in watch:
It will look something like this:
// default watch configuration
watch: {
coffee: {
files: 'app/scripts/**/*.coffee',
tasks: 'coffee reload'
},
compass: {
files: [
'app/styles/**/*.{scss,sass}'
],
tasks: 'compass reload'
},
reload: {
files: [
'app/*.html',
'app/styles/**/*.css',
'app/scripts/**/*.js',
'app/images/**/*'
],
tasks: 'reload'
}
}
And after you have removed it something like this:
// default watch configuration
watch: {
coffee: {
files: 'app/scripts/**/*.coffee',
tasks: 'coffee reload'
},
compass: {
files: [
'app/styles/**/*.{scss,sass}'
],
tasks: 'compass reload'
}
}
I think i have seen a commandline flag, but I was unable to find it.
Yeoman Livereload consists of two parts: the middleware that inserts the livereload snippet, and the livereload target in the watch task. To disable livereload, remove both:
Livereload snippet at the top of the Gruntfile:
// Generated on ...
'use strict';
var LIVERELOAD_PORT = 35729; // <- Delete this
var lrSnippet = require('connect-livereload')({port: LIVERELOAD_PORT}); // <- Delete this
var mountFolder = function (connect, dir) {
return connect.static(require('path').resolve(dir));
};
Livereload task in Watch:
watch: {
// Delete this target
livereload: {
options: {
livereload: LIVERELOAD_PORT
},
files: [
//...
]
}
}
And the middleware that inserts the snippet:
connect: {
options: {
port: 9000,
hostname: 'localhost'
},
livereload: {
options: {
middleware: function (connect) {
return [
lrSnippet, // <- Delete this middleware
mountFolder(connect, '.tmp'),
mountFolder(connect, yeomanConfig.app)
];
}
}
For updates on fixing the livereload-connect issues in Yeoman, track this issue: https://github.com/yeoman/generator-webapp/issues/63

Resources