How to pull latest image for front and backend with build ids specified in the image tags - angularjs

I have added BuildId for app and api tags. How can I get api buildid for backend and app buildid for frontend?
In azure-pipelines.yml for api:
variables:
dockerRegistryServiceConnection: 'Docker-Registry'
imageRepository: 'library/backend'
dockerFilePath: 'Dockerfile'
tags: "$(Build.BuildId):latest"
In azure-pipelines.yml for app:
variables:
dockerRegistryServiceConnection: 'Docker-Registry'
imageRepository: 'library/frontend'
dockerFilePath: 'Dockerfile'
tags: "$(Build.BuildId):latest"
How can I pull the latest app buildid for frontend in here?
container {
image = ".../library/frontend/<*how-to-pull-app buildid-here*>:latest"
name = "library-frontend"
image_pull_policy = "Always"
And how can I pull the latest api buildid for backend in here?
container {
image = ".../library/backend/<*how-to-have-api-buildid-here*>:latest"
name = "library-backend"
image_pull_policy = "Always"

Related

How to upload image to an Amazon S3 bucket using React js?

I am a newbie on Amazon S3. I am facing the issue regarding uploading the image directly from frontend to an Amazon S3 bucket. I viewed many tutorials but there is no proper explanation about uploading image directly to s3. Need a solution to it using React js only.
One solution is to import the AWS SDK for JavaScript v3 into your React app and then use the s3Client within your React app. There are instructions on how to use this SDK in a React app here:
Getting started in React Native
Here is more content that shows HOW TO use the AWS SDK for JavaScript in a React App:
Integrate the AWS SDK for JavaScript into a React App
To upload an object to an Amazon S3 bucket using the s3Client, use this code example:
// Import required AWS SDK clients and commands for Node.js.
import { PutObjectCommand } from "#aws-sdk/client-s3";
import { s3Client } from "./libs/s3Client.js"; // Helper function that creates an Amazon S3 service client module.
// Set the parameters.
export const bucketParams = {
Bucket: "BUCKET_NAME",
// Specify the name of the new object. For example, 'index.html'.
// To create a directory for the object, use '/'. For example, 'myApp/package.json'.
Key: "OBJECT_NAME",
// Content of the new object.
Body: "BODY",
};
// Create and upload the object to the S3 bucket.
export const run = async () => {
try {
const data = await s3Client.send(new PutObjectCommand(bucketParams));
return data; // For unit tests.
console.log(
"Successfully uploaded object: " +
bucketParams.Bucket +
"/" +
bucketParams.Key
);
} catch (err) {
console.log("Error", err);
}
};
run();
You can view more Amazon S3 code examples for the the s3Client in the AWS Github repo:
Amazon S3 JavaScript SDK v3 code examples

NextJS dynamimc routing question about slugs

I have a doubt with nextjs..
I'm building my site like this
pages
[slug]
index.jsx
index.jsx
so in my slug/index I'm doing this
export async function getStaticPaths() {
const resProducts = await fetch(`${process.env.PRIVATE_ENDPOINT}/products`);
const products = await resProducts.json();
const paths = products.data.map((p) => ({
params: {
slugProduct: p.slug,
},
}));
return {
// this should be dynamic
paths,
fallback: true,
};
}
My question is what happend if I add a new product in my back office?
Do I have to rebuild with next build?
My question is what happend if I add a new product in my back office?
Do I have to rebuild with next build?
The short answer is NO. If the requested page have not been genereted at build time, Next.js will serve a "fallback" version of the page and will statically generate the requested path HTML and JSON on the background. When the statically generation completed, the browser receives the JSON for the generated path. Subsequent requests to the same path will serve the generated page, just like other pages pre-rendered at build time.
Don't forget to use router.isFallback to detect that request is on fallback.
You can see the good document here.
https://nextjs.org/docs/basic-features/data-fetching#getstaticpaths-static-generation

How to progamatically create pages in gatsby with a CMS backend?

I have a Django CMS that serves as my back-end application. And I'm trying to create pages dynamically in my Gatsby front-end site. My Django application is exposed over GraphQL using Graphene. But I'm not able to query the slugs from backend CMS and create pages using gatsby-node.js. How do I create pages when I create a page in the back-end application?
The idea being
//gatsby-node.js
exports.createPages = ({ graphql, actions }) => {
const pages = graphql`
{
blogPages{
edges{
node{
slug // this slug supposed to come from the backend CMS (Atleast i think)
}
}
}
}
`;
const { createPage } = actions
const blogTemplate = path.resolve(`src/templates/blogTemplate.js`);
pages.blogPages.edges.forEach(edge => { //this should help to create dynamic pages - slug coming from backend CMS
const slug = edge.node.blogpage.slug;
createPage({
path: slug,
component: blogTemplate
})
})
}
It's been said in the comments already, but just to summarize: since Gatsby is a static site generator you cannot dynamically add pages at runtime. Each page corresponds to its own html file that needs to be created on your webserver. That is not something you can do at runtime.
What you can do is to set up a continuous integration workflow where you have a build running in the cloud somewhere. Trigger it when you make a change in Django, or alternatively run it regularly (hourly/daily) to update the site.
If running a rebuild does not work for your use case you need to look at an entirely different architecture.

How to setup http-proxy-middleware using same endpoint for different api url | React | Axios

I am trying to setup http-proxy-middleware for multiple API URLs with same end point, which is not working.
setupProxy.php
const proxy =require("http-proxy-middleware");
module.exports = function(app)
{
app.use(proxy("rest/V1/orders",{target:"http://example.net/",changeOrigin:true}));
app.use(proxy("rest/V1/orders",{target:"http://example.org/",changeOrigin:true}));
app.use(proxy("rest/V1/orders",{target:"http://example.com/",changeOrigin:true}));
}
use this package for https-proxy-middleware
For setup Create setupProxy.js under src directory
Ref the doc for sample code

Koa.js serve React, api url also render with React page in Chrome

I'm using koa-static to serve static file with root url localhost:3000/, and koa-router to serve RESTful api, like localhost:3000/api/account/login
Make a fakeBuild folder contain only one file index.html. All work fine. root url and api url show correct content.
// serve static file
const serve = require('koa-static')
const staticPath = path.join(__dirname,'..','Client','poker','fakeBuild')
log(staticPath)
app.use(serve(staticPath))
// router
const router = require('./router/Index.js')(app)
Then I try to connect Koa with React
I use yarn build to build React static files, React project is created by create-react-app, not modified.
Then I change the koa-static's target to build folder, just one line changed
const staticPath = path.join(__dirname,'..','Client','poker','build')
Then access localhost:3000/, chrome show React start page, works
Then access localhost:3000/api/account/login, chrome show React start page, what??
Use postman check localhost:3000/api/account/login, it response what I put in router, fine.
So I can use apis, just ignore chrome's result?
It must be React and Chrome doing something extra. I try to remove service-worker.js in React build folder, api url render correctly in chrome.
So anyone can give some documents or explain to help me understand what react done, to keep all the url render it.
And why my api localhost:3000/api/account/login not require service-worker.js (just return some text in response body), also got the js worked. Just because koa-static served the file?
====
Update: my router code, And project available on here
router/Index.js
const Router = require('koa-router');
const R = (app)=>{
const router = new Router();
const api = require('./Api.js');
router.use('/api', api.routes(), api.allowedMethods())
app.use(router.routes())
.use(router.allowedMethods());
};
module.exports = R;
router/Api.js
const Router = require('koa-router')
const log = require('../helper/Utils').log;
module.exports = (function () {
const Api = new Router();
Api.get('/account/login', async (ctx, next)=>{
log("hello");
ctx.status = 200;
ctx.body = `login`
});
Api.get('/account/register', async (ctx, next)=>{
ctx.status = 200;
ctx.body = `register`
});
return Api;
})();

Resources