I am using Nuxt.js for my web applications but never used the full static generator until now. My CI/CD pipeline builds and deploys a docker image containing of an nginx image with the static generated Nuxt.js app. My problem now is that I can not figure out how to use and load an app configuration file. Of course I could define all environment variables (like API_URL) during the build process but then i would have to separate images for each environment which would be unfortune.
My approach that I have in mind would be creating a config.json file and maybe having nginx deal with that but how can I tell my web application where he should look for the settings file?
My guess is that maybe people using webpack have come around this problem and know how to deal with it.
I have tried to look into this before.
The TLDR is that you cannot have on-runtime variables for the target: static build, especially with the way how some modules are made.
More info on this Github issue: https://github.com/nuxt/nuxt.js/issues/5100
So yeah, it comes down to have some dynamic webpack configs via your CI/CD, this is how my team handles it at least.
Related
I've been searching for a long while trying to get this issue solved but so far I've not figured it out. Like David from asp.net config transforms - don't apply for normal builds, only publish, I would like to run a build locally and easily change the database and APIs it connects to with a toggle.
The Solution Configurations with Transforms seems like the best solution but the transforms only get applied when publishing and I can't figure out how to make them apply when doing a local run of the app in IIS Express. I installed SlowCheetah I assumed it'd fix that issue since it does the transforms at compile time but they're still not applied when doing a local build in Visual Studio.
I've also tried using the ConfigurationManager extensions and while they do work for local changes, they're not dynamic. So I can't have a different config based upon the selected Solution Configuration, or a flag in a config file saying "Prod", "Staging", or "DEV".
So how do I make this happen? I'm looking for the following "features":
No secrets checked in to the code repository
Config changes happen even when running the application locally WITHOUT publishing
Being able to debug is important as well.
Changing between local, Dev, Staging, and Prod databases/apis is easy. Best would be the Solution Configuration selection but a single line in a config file specifying the environment and then the system knowing which configs to use from that would be OK as well.
So I'm struggling a bit with this. Let's say I build my NextJS project, I have 2 css files one of them is 10mb. Then I run next start and I see on Lighthouse that the file size is only a few kb. But if I run node server.js on the standalone folder, the css file size stays the same and that's a problem. Is this the intended behavior? Is there any way to fix this?
When I say standalone folder I mean this: https://nextjs.org/docs/advanced-features/output-file-tracing#automatically-copying-traced-files-experimental
UPDATED
I think you're trying to build custom server (https://nextjs.org/docs/advanced-features/custom-server)
According to that document, they mention this part which may be related to what you're looking for
Before deciding to use a custom server, please keep in mind that it
should only be used when the integrated router of Next.js can't meet
your app requirements. A custom server will remove important
performance optimizations, like serverless functions and Automatic
Static Optimization.
OLD ANSWER
next start usually goes along with next build (https://nextjs.org/docs/api-reference/cli#production) and it has its own custom configs under next.config with a ton of good stuff like file compression, routings, image optimization, etc. (under the hood, it also uses Webpack and Babel for builds)
node server.js is just simply to run a server and does nothing else. Therefore, if you want to have better builds like NextJS. You need to add libraries into NodeJS.
You can find some useful libraries here.
https://blog.bitsrc.io/23-insanely-useful-nodejs-libraries-you-should-know-in-2020-5a9b570d5416
I do have one Flutter web app, but because of our workflow we use multiple Firebase projects (dev, stage, prod) for hosting. This wouldn't be a big deal, if I don't need different index.html file.
Sadly we use Google SignIn and this will need a meta google-signin-client_id key. This differs between the projects.
What's the best practice to setup this project, so a CI/CD can deploy it without any changes to the index.html before upload? Is this even possible yet?
My own solution, that I found somewhere:
create flavor folders (eg. /web_flavors/dev and /web_flavors/prod)
create a script, which copy the index.html from that flavor folders into /web before the compile
This way you will always have the right configuration within you build pipeline.
My only "problem" is, that I have to maintain the two files, if I need more HTML/JScript code in the index.html.
Ok I'm new to Polymer, after seeing the main page and Google IO 2016 video, I wanted to try it out, and right now I created a basic web application with it.
I managed to get it build and running it through the "polymer serve" command, but now that I want to release it to a production environment (I have an nginx cluster), how do I build the application to just a bunch of static website files?
I executed "polymer build" and I see the build folder and it contains 2 folders: bundled and unbundled, and inside them there are the bower_components, src and test folders as well as other stuff for running it through "polymer serve" but there's not a build/dist of build/static folder that I can copy into nginx so the application is served through it.
BTW, what I mean about a dist folder is without a readme, bower.json, test, bower_components, etc. just the pure needed HTML, CSS, JS, etc files that need to be served through nginx (or any other web server) as static file web content.
I went through the documentation but there's no details on how to do such task.
Any suggestions on how to build a static content folder for serving my polymer web app through nginx?
Thanks!
As of Polymer-CLI v0.11.0, there's no built-in way to filter out files from the bundle, but it's a requested feature. Also, the build output currently includes extraneous files (a bug), such as the test directory.
As an alternative, you could use Polymer Starter Kit 1.3.0, whose dist folder doesn't include the extra files (although it does include required bower_components as-is).
I would like to issue one command to build both a grails and a flex project (the Flex project can be built with Ant). I have a file, WEB-INF/flex/services-config.xml which needs to be different for the PROD war build and the DEV environment.
I'm thinking of having two files: services-config-PROD.xml and services-config-DEV.xml and then copying the relevant one to services-config.xml whenever a build happens.
So in dev I run 'grails run-app' and it copies the file and runs the app; and for prod I run 'grails war' (or some other command) and it copies the file, creates a war, and also calls the Flex project to build via its Ant build file.
What would be the best way to acheive this, or at least any part of what I'm asking?
Seems overly complicated. Why do you need the services-config? Personally, I never use it, I use code to create my services which can be done dynamically if needed. If you want one for prod or dev, you can all do it within code.
I would imagine that prod and dev is just 2 different server urls? I normally let html pass those urls using FlashVars. That way, both servers can point to exactly the same swf (or different swf versions), but just change that one FlashVar to make the application point at a different location.