For my web app, I am using Express, Node.js in the backend, and in the front-end I am serving some HTML files. I am not using any front-end framework.
In the backend, I am specifying the front-end files' location with:
app.use('/public', express.static(path.resolve(__dirname, "../public")));
In the public folders, I am placing all the front-end HTML files. I also have some Express routers to serve users the correct files:
router.get("/", (req, res) => {
res.sendFile(path.join(__dirname, "../public/html/main/example.html"));
});
In example.html file, it is requiring a JS file <script src="/resource/js/script1" async></script> Inside script1, I am using a public key pk_test_wefwefeweffwe. That key is only for development. For production, I need a new key pk_live_woefiweoifnweoif. For now, whenever we deploy live. I have to change that key manually. I am wondering if there is an automatic way of doing it.
In the node.js backend, I can detect whether we are in production or development with process.env.NODE_ENV. But that is not possible to detect in a front-end JS file such as script1. I thought of serving different HTML files depending if the backend environment is prod or dev, but that seems a little tedious, since I have to update the HTML/JS file every time I make a change.
Is there a convenient method of making/serving different front-end files (or modifying a part of the front-end file depending if the environment is prod or dev) depending if the environment is prod or dev?
You have two choices:
Compile time
If you're running a build for your UI you can replace environment variables at compilation time (Webpack and Rollup and all others should have the ability).
Advantages: No special system to read env vars. Can do compile time differences for different envs (e.g. source maps or dev builds with more debugging for dev env). No server required to dynamically insert the right env vars.
Disadvantages: Can significantly complicate deployment pipelines particularly needing to create Docker images for each env rather than promoting a single one through.
Run time
You pass your env vars by either manipulating the served HTML in <head>:
<script>
window.__ENV = { someEnvVars: 'nice' }
</script>
Or by adding to your HTML <head> in the front end files:
<script src="envvars.js"></script>
And then detect if this file is being requested on the NodeJS server and return window.__ENV = { someEnvVars: 'nice' } as the content dynamically.
Advantages: Simple deploy pipeline in professional Docker type situations. No need for special front end build tools to replace variables.
Disadvantages: Requires a server to dynamically insert the env vars (your app is less portable and can't simply be run on any server which can serve static files). Have to make one production worthy build (NODE_ENV = 'production') for all envs (less debugging output in React for example).
Related
So, I have a Nuxt 3 application where i make requests to an API through fetch.To facilitate maintenance, it's good that all paths are called dynamically from some variable or file, in case the API changes address. So, is there any way to define the path of requests in some file or database, that it's possible to change them after the build, in case the API changes address?
I defined all request addresses in an .env file, similar to this:
API_BASE_URL = http://adress:port/routes/base/
API_POST = http://adress:port/routes/post
API_GET_ITENS = http://adress:port/routes/get/
(etc)
That way, if the API is deployed on a different machine, I don't need to change all fetchs in code, just changing the value of the corresponding variable in .env. This works fine in the development environment.
However, when deploying the application it's necessary to build the project through npm build command, which generates a folder called .output with the project composed of .mjs files.
I didn't find any .env files in the built project. Apparently, it is not possible to change the environment variables after the build, being necessary to change before and build the project again.
I was expecting that after the build there would still be a file with the routes that could be changed, because after hand the system, the customer can change the API address without having to build and deploy the front again.
I use webpack to bundle my React app, it emits static files like the index.html, app.js, vendors.js and resource files. Then I simply throw them to a nginx server, and it works. Now I just start playing with Electron, and I can start a dev server for the app and then start electron, so it works. But I'm wondering how do I make it to production and package it. Do I also need a server to run my app? Like having a naught server to support my app in the electron environment...than what if the server is down, I don't think that's the solution. However, if I simply throw the static files into the electron environment, it reads the js files, but doesn't run it.
I wrote a small single page application in BackboneJS and not sure how to get it into production. I typically use grunt serve command and it runs everything and displays to localhost:9000.
How do I do this on a production server so I can access the app from www.example.com.
Backbone apps are all static files man, so you can put it in a CDN or just have apache/nginx serve them as static files.. Doesnt get any simpler than that really.
Get a server
Install nginx/apache
Configure nginx/apache to use your example.com and link it your /path/www/your-backbone-app
Copy over your dist/ directory to /path/www/your-backbone-app
i really suggest you minify the hell out of your html/css/js since you said your backbone app is all one "page". Make 1 js file with everything inside (look into require.js and "r.js").
Profit!
Your best choice is to do it all in your computer: require.js can do all of this automated! ->. join and minify all that apply, change the html code to reflect the new minified names of the css and js, zip. Finally run this from the console scp -r ~/yourapp/dist/ server:/path/www/your-backbone-app. Greatest thing of all this is you dont have to do anything else after that command. Enjoy.
I know how to get the current directory from a Meteor package, but how do I get the path of a specific file in the project?
node's __dirname and __filename don't work in Meteor.
It is complicated.
meteor run copies your project files to a tree of directories inside <project-dir>/.meteor/local/build, reorganizes them in non-obvious ways (e.g.. the private subdirectory in the original tree becomes the assets subdirectory) and mixes it in with various npm modules to create a bundle that can be executed as a nodejs project. Indeed, to avoid duplications, there is a .gitignore file automatically set up in the .meteor directory that tells git, if you use it for version control, not to copy the .meteor/local directory.
The original project directory gets watched in case you change a file. The change then gets copied into the current project build directory and the project rebuilt.
If you deploy to a remote system, the build gets copied to a server and then run.
process is usually a defined global server-side object, and works according to the node.js API, because the meteor server code is ultimately running in node.js.
So you can run console.log(process.cwd()); in your server-side to obtain the current working directory for the server process, usually something like:
~/<meteor project directory>/.meteor/local/build/programs/server
This suggests that when meteor run is done locally, original project files are in ../../../../../, but don't use that as it may change in the future.
Instead, for the directory containing the original project files, you could use:
baseDir = process.cwd().replace(/\/\.meteor.*$/, '');
This will get the working directory, and truncate everything beginning with /.meteor
This won't work for a server deploy, though, because the original project tree is not needed on the server, only the build. Files that aren't intended to be client or server code could possibly be stuck in the private subdir, which as I mentioned becomes the assets subdir in the build. Ways to currently find files in the build is either manual inspection .meteor/local in a local run, or use of a JS library that calls or imitates gnu find.
Since you mentioned packages, I note that in the build, server-side package code finally ends up in:
~/<project-dir>/.meteor/local/build/programs/server/packages
and client side in:
~/<project-dir>/.meteor/local/build/programs/web.browser/packages
I have been loading so many JS and CSS in my project.
To improve my site performance, I started with YUICompression integrated with Ant build.
So each time when I build the project it creates minified file with appending"-min.js"
Example: myscript.js after build, new file "myscript-min.js".
Now I have changing all the files to load myscript-min.js in my pages.
Is there any automation or simpler way to load the minify file.
Thanks in Advance!!!
In your code, try to determine the environment (production or development) from where you're loading the page. For instance, when developing on a local machine, you can check your IP address, a server environment variable (using Apache SetEnv), script path, etc. Using that data, either load the minified script (in production environment), or the separate scripts (in your development environment).
I am assuming that you're using a server side scripting language, like PHP. If you're serving static HTML files, it gets a bit more tricky (I'm thinking dynamic javascript loading or something).
If you (can) use PHP in your project then have a look at the minify project. It takes care of most of the chores. You are free to use uncompressed versions of your CSS and JS files, minify will compress them on-demand when these files are requested over HTTP.
If you're using PHP, just do the following:
Edit the apache config file on your production machine and add this line to httpd.conf (restart apache afterwards). On a shared hosting you should try .htaccess if you don't have access to httpd.conf.
SetEnv ENVIRONMENT production
This simply adds a variable to apache telling your that you're running in production mode. On your development machine, change the value "production" to "development" or whatever makes sense to you.
Then in your PHP file, you can switch between loading the full JS files and the minified one, like so:
if(isset($_SERVER['ENVIRONMENT']) && $_SERVER['ENVIRONMENT'] == "production")
{
... production minified JS here
}
else
{
... development unminified JS here
}