I'm trying to deploy the static nextjs app(next export) on local Windows IIS.
The web app communicates RestFul API server deployed on the same network.
The problem is the address of RestFul API server.
It's from .env.* file. The env file has the key-value pair of (NEXT_PUBLIC_API_URL, http://192.168.1.12:8080/api).
When build the app with next build command, the value(http://192.168.1.12:8080) is inserted to output source code directly.
It's ok in development process because the address of API is fixed, but it must be changed dynamically after deployed on production.
Is there anything I can do to export values for static nextjs app dynamically on local IIS?
To solve this problem I created some static-env.json file in public folder like below:
{
"apiURL" : "http://192.168.1.12:8080/api"
}
and import it by import staticEnv from "/public/static-env.json, but the result is the same with above. the value itself is inserted to code directly.
I think if this "inserting" action can be prevented, I can use this method.
Related
Inside a Firebase project called originalawesome I set up a second site on Firebase Hosting, then I have:
originalawesome.web.app
secondawesome.web.app
The first one (originalawesome) has a JS application in production.
In the second (secondawesome) I want to install a Flutter Web App and for this I am following the following steps:
firebase init
(I select Hosting)
(I select to use an existing project)
(I select the project - originalawesome) //secondawesome is not an option
There it asks me to select the directory to publish, so I suppose the Flutter Web application will publish on my site in production, which is wrong.
Reading the documentation in Share project resources across multiple sites , when deployments are to be made in different sites, the Deploy Targets are requested to be differential with the following command:
firebase target: apply hosting secondawesome secondawesome
However, when I run it I get an error because I don't have a firebase json file yet.
Error: Not in a Firebase app directory (could not locate
firebase.json)
The question is, How can I deploy a Flutter Web App on a second Firebase Hosting without deleting the previous one?
After a fair amount of trial and error the solution is as follows:
In the App Root Directory (it's very important):
flutter build web --web-renderer html //In my case, I will
//generate html web rendered. It will create a firebase.json
//file and others
firebase target:apply hosting originalawesome originalawesome
firebase target: apply hosting secondawesome secondawesome
//It will create records in .firebaserc file
In firebase.json file, you need to include:
{
"hosting": {
"target": "secondawesome", //deploy target
//(previously created on Firebase Hosting Console)
"public": "build/web", //build/web is the directory of the Flutter Web App build
///rest of file
Now yes, run...
firebase init
? What do you want to use as your public directory? build/web
? Configure as a single-page app (rewrite all urls to /index.html)?
Yes
? Set up automatic builds and deploys with GitHub? No
? File build/web/index.html already exists. Overwrite? No
To finish and upload the files to the Firebase Hosting ...
firebase deploy --only hosting:secondawesome
I hope it serves someone else!!
I created a simple Blazor WASM webapp using C# .NET5. It connects to some Functions which in turn get some data from a SQL Server database.
I followed the tutorial of BlazorTrain: https://www.youtube.com/watch?v=5QctDo9MWps
Locally using Azurite to emulate the Azure stuff it all works fine.
But after deployment using GitHub Action the webapp starts but then it needs to get some data using the Functions and that fails. Running the Function in Postman results in a 503: Function host is not running.
I'm not sure what I need to configure more. I can't find the logging from Functions. I use the injected ILog, but can find the log messages in Azure Portal.
In Azure portal I see my 3 GET functions, but no option to test or see the logging.
With the help of #Aravid I found my problem.
Because I locally needed to tell my client the URL of the API I added a configuration in Client\wwwroot\appsettings.Development.json.
Of course this file doesn't get deployed.
After changing my code in Program.cs to:
var apiAddress = builder.Configuration["ApiAddress"] ?? $"{builder.HostEnvironment.BaseAddress}/api/";
builder.Services.AddHttpClient("Api",(options) => {
options.BaseAddress = new Uri(apiAddress);
});
My client works again.
I also added my SqlServer connection string in the Application Settings of my Static Web App and the functions are working as well.
I hope somebody else will benefit from this. Took me several hours to figure it out ;)
I'm new to application deployment, I have an Express application which uses Github's Passport strategy to authenticate users and saves them to a (remote) MongoDB database, when using localhost, my application works as expected.
I'm using the Zeit Now (OSS plan) CLI tool which was installed globally with NPM.
The issue
When I deploy my application using "now" inside the root of the project-folder and then goto "https://github.com/settings/applications/app" and swap the Homepage-URL and the "auth/github/callback" [callback] URL from "http://localhost:3000/auth/github/callback" with the URL generated by Now - so it becomes "https://app-name-pxwlglhegg.now.sh/auth/github/callback" I get redirect-uri-mismatch :
https://app-name-pxwlglhegg.now.sh/auth/github/callback?error=redirect_uri_mismatch&error_description=The+redirect_uri+MUST+match+the+registered+callback+URL+for+this+application.&error_uri=https%3A%2F%2Fdeveloper.github.com%2Fapps%2Fmanaging-oauth-apps%2Ftroubleshooting-authorization-request-errors%2F%23redirect-uri-mismatch
I've tried several times and can't figure it out.
You change the callback on GitHub, but the same setting inside your app is not changed. So they mismatch.
I have Spring Boot as back-end and Angular2 as front-end. I want to develop both of them separately and deploy onto Heroku.
They shouldn't have any common dependencies and should be in separate git-repos.
As I understand, there are two main ways to implement:
run npm build and copy dist folder into resource folder of Spring application so last will handle it as a static content
run server for serving exclusively Angular app which will communicate with Spring app (CORS problem appears here?) so there are two servers at sum
I think first way is a bit "dirty" since I do not think that copy folder from one project to another is any good.
And second way is overkill because I have two servers (Tomcat and Node.js, for example). Why should I have server with Angular app if I can simply put Angular inside Spring?
Is there is any more rightful way to make aforementioned?
Thanks.
In my organization, we have a lot of Spring Boot and Angular apps. When two servers are unnecessary, Spring Boot can serve up the static content from any supported URL (such as "http:" or "file:"). Simply pass this argument to your app on startup:
--spring.resources.static-locations=<url>
Spring Boot can also support Angular single-page app routing by including the following web MVC configuration. This ensures that even if the user refreshes the page in the browser, Spring Boot will still serve up the contents of index.html for other angular routes.
public class SinglePageAppWebMvcConfigurer extends WebMvcConfigurerAdapter
{
#Autowired
private ResourceProperties resourceProperties;
private String apiPath = "/api";
public SinglePageAppWebMvcConfigurer()
{
}
public SinglePageAppWebMvcConfigurer(String apiPath)
{
this.apiPath = apiPath;
}
protected String getApiPath()
{
return apiPath;
}
#Override
public void addResourceHandlers(ResourceHandlerRegistry registry)
{
registry.addResourceHandler("/**")
.addResourceLocations(resourceProperties.getStaticLocations())
.setCachePeriod(resourceProperties.getCachePeriod()).resourceChain(true)
.addResolver(new SinglePageAppResourceResolver());
}
private class SinglePageAppResourceResolver extends PathResourceResolver
{
#Override
protected Resource getResource(String resourcePath, Resource location) throws IOException
{
Resource resource = location.createRelative(resourcePath);
if (resource.exists() && resource.isReadable()) {
return resource;
} else if (getApiPath() != null && ("/" + resourcePath).startsWith(getApiPath())) {
return null;
} else {
LoggerFactory.getLogger(getClass()).info("Routing /" + resourcePath + " to /index.html");
resource = location.createRelative("index.html");
if (resource.exists() && resource.isReadable()) {
return resource;
} else {
return null;
}
}
}
}
}
Option 1
One server process hosting REST APIs and another server process hosting Angular UI
This option is the recommended option in a MicroServices based architecture where the individual APIs (or small related group of APIs) are run and scaled separately by hosting them in separate server processes. In such scenarios, if the Angular UI is also bundled with the REST APIs, it would mean that every bug-fix or enhancement in the Angular UI would require rebuilding and redeployment of your services. And when we start doing that, it would defeat the purpose of Microservices based architecture.
Therefore, in such an architecture one or more server instances would host only the Angular UI. The Angular UI would in turn call the individual APIs through an API Gateway using some service discovery mechanism. However, Microservices based architecture is not trivial - it's complex with a lot of moving parts. Such level of complexity can be justified for large projects.
Option 2
One server process hosting both REST APIs and Angular UI
This option is the recommended option for small to medium sized projects where the user base is a few hundred users.
In such projects, create a single repository where a Maven project would contain two sub-modules - one for the REST APIs and the other for the Angular UI.
Use the Maven plugin "frontend-maven-plugin" to build the UI part. This will automatically download the specified NodeJs version and invoke appropriate npm commands to build the Angular project. Finally, using the Maven element copy the Angular dist folder to the Spring Boot static folder under the resources folder. (In the .gitignore file exclude the static folder so that the Angular distribution files are not checked into the source control along with the REST APIs).
Now, as the Java build will start, it would automatically include the static folder in the fat jar which would now serve both the APIs and the Angular UI.
So far I created applications with angular and spring-boot, using one git repository, but two different maven projects, one for the backend, one for the frontend.
With Maven than I built one fat jar with an embedded Tomcat and deployed it to Amazon EC2.
I also experimented with Heroku and you could for sure deploy the same fat jar there.
For the next project I would take another approach and deploy all static resources like html, javascript etc. to Amazon S3 and only the spring-boot app to a provider like heroku.
Frontend deployment this way seems to be much easier, faster and cheaper.
There is also a blog post about Using AWS S3 to Store Static Assets and File Uploads
i have a simple question.
When you use node + webpack you can easily configure whatever you want.
For example i can write in config default path for my app modules.
Haw can i do it in Meteor 1.3? do they have some config file such Webpack?
Meteor applications can store configuration options like API keys or global settings. An easy way to provide this configuration is with a settings.json file in the root of your Meteor application. The key/value pairs are available only on the server, but you can provide public access to settings by using public:
settings.json
{
"privateKey": "privateValue",
"public": {
"publicKey": "publicValue"
}
}
These values are available in your app using Meteor.settings.
From the Full Meteor Docs:
Meteor.settings contains deployment-specific configuration options. You can initialize settings by passing the --settings option (which takes the name of a file containing JSON data) to meteor run or meteor deploy. When running your server directly (e.g. from a bundle), you instead specify settings by putting the JSON directly into the METEOR_SETTINGS environment variable. If the settings object contains a key named public, then Meteor.settings.public will be available on the client as well as the server. All other properties of Meteor.settings are only defined on the server. You can rely on Meteor.settings and Meteor.settings.public being defined objects (not undefined) on both client and server even if there are no settings specified. Changes to Meteor.settings.public at runtime will be picked up by new client connections.
A good write-up can also be found on TheMeteorChef's Blog