Create Point Web Page for Different API URLs
I am using webpack
in my project angular 4
. It points to the same url for api
. Now, for production, I have a different API url and where should I specify the new url? I am using a project jhipster
.
Source: https://jhipster.github.io/using-angular/
webpack.prod.js:
const commonConfig = require('./webpack.common.js');
const webpackMerge = require('webpack-merge');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const Visualizer = require('webpack-visualizer-plugin');
const path = require('path');
const ENV = 'prod';
module.exports = webpackMerge(commonConfig({ env: ENV }), {
devtool: 'source-map',
output: {
path: path.resolve('./build/www'),
filename: '[hash].[name].bundle.js',
chunkFilename: '[hash].[id].chunk.js'
},
plugins: [
new ExtractTextPlugin('[hash].styles.css'),
new Visualizer({
// Webpack statistics in target folder
filename: '../stats.html'
})
]
});
source to share
I suggest treating your environment dependent variables as actual environment variablesas indicated by the 3rd rule of the twelve factor approach.
You will not overload your code with constantly changing environment materials, and you can easily update them from outside the application, even directly from your deployment system.
In a node environment, I personally prefer to store these variables in a dedicated file .env
placed at the root of my project.
VAR_1=foo
VAR_2=bar
You can have a different file .xxx.env
for each environment, or a program file before building.
To make the declared env vars available to your code, I suggest using the webpack-dotenv-plugin .
You will be able to get environment variables from your application, for example the standard node custom vars environments:
const var1 = process.env.VAR_1; // foo
const var2 = process.env.VAR_2; // bar
source to share
DOCS or V2 . Also, you might need to add a public path to your output object (something to look into). You will simply edit your host file to contain the domain you want and then add the following code to your webpack.config:
devServer: {
host: "localhost.specialurl.com",
port: 1234,
https: true
},
//webpack.production.config.js
var path = require('path');
var mainPath = path.resolve(__dirname, 'app', 'main.js');
var buildPath = path.resolve(__dirname, 'public', 'build');
entry: mainPath,
output: {
// Everything related to Webpack should go through a build path,
// localhost:3000/build. That makes proxying easier to handle
path: buildPath,
filename: 'bundle.js'
},
source to share