I have two projects - frontend (vue) and backend (nodejs) - of one web app. I'm using webpack to build frontend. All images change their names to hashes during building. Now i need to know some of them at backend side. What is best way to share that info between frontend and backend?
I can use simple hardcoding approach or rely on custom hand-written mapping and use custom script to load assets. But both of these are fragile approach.
Webpack allows multi-build projects using target. Exactly, how to achieve this using Webpack?
Webpack programmatic can help you webpack Node API
// webpack/script.js
import webpack from "webpack";
const compiler = webpack({ /* your config*/ }, (err, stats) => {
// stats.toJson(options)
console.log(stats.toString())
// make api call for getting the info in backend with stats of your choice
})
Related
I am currently writing some E2E tests with Cypress for a Gatsby based project.
For one test in particular, i'd like to loop through all pages of my Gatsby site, and in order to achieve this, I need a test fixture (e.g. endpoints.json) which includes an array of all urls.
I've tried the following methods (but all have limitations):
1. Running a node script to check the folder structure in the src/pages folder
Limitation - This doesn't account for dynamically generated pages in gatsby-node.js with graphql
2. Running a node script to scrape URLs in the sitemap.xml file generated with gatsby-plugin-sitemap
Limitation - The plugin only generated a sitemap.xml file in prod builds and not in dev (cypress runs a dev server)
Would be more than grateful if anyone has a suggestion for how we would get a full list of Gatsby endpoints in this environment.
You might just want to generate a file in the desired format on-build using the data in GraphQL:
// gatsby-node.js
const path = require("path")
const fs = require("fs").promises
exports.onPostBuild = async ({ graphql }) => {
const { data } = await graphql(`
{
pages: allSitePage {
nodes {
path
}
}
}
`)
return fs.writeFile(
path.resolve(__dirname, "all-pages.txt"),
data.pages.nodes.map(node => node.path).join("\n")
)
}
This creates a .txt file with each page’s path on a line. You could also just write out the data as JSON by passing in JSON.stringify(data.pages) as the second argument to writeFile, though.
There is a pretty cool new plugin for Cypress that will allow you to get the endpoints in your fixtures and env variable, called gatsby-cypress-endpoints. coreyward's answer is perfectly valid, but this should allow you to get the endpoints only when you run Cypress.
Please be aware that with more recent versions of Gatsby (particularly v3) you may have to set the env variable CI=true for the suggested solutions to work.
I believe this is because of changes to the development experience where pages & queries are processed on-demand instead of upfront.
The following flags FAST_DEV / QUERY_ON_DEMAND may be responsible for this behaviour.
I am developing a Laravel project. And I am using a third party HTML template which is using webpack and laravel mix to compile all assets. I need to know is there any way to import that HTML template to Laravel and compile it within the Laravel project. I am new to frontend technologies like webpack/laravel mix. It would be great if anyone can guide me. Thanks
I'm not familiar with Laravel, but since you have NodeJS in your stack, you should be able to incorporate a build step for copying templates into wherever Laravel needs them (I guess /assets/templates?)
Something like this perhaps?
const fs = require('fs')
webpack(webpackConfig, error => {
if (error) console.error(error)
else {
fs.copyFileSync('generatedTemplate.js', '/assets/templates')
}
})
I can't offer much more advice without knowing your setup. I think utilizing NodeJS is the solution here though.
I am writing a Client / Server application with the front end UI based in React. As a back-end Unix developer web technologies are not my forte so this is all new to me.
I need to be able to configure the UI to point to the server's URL and also to set other preferences. The typical react approach seems to be to use .env environment variables. However, as per this link:
multiple-environments-with-react
'the “environment variables” will be baked in at build time'. This does not work for me as the application is an OEM offering to be sold to customers who would configure it themselves for their own environment. I do not know their server URLS at build time so I need a way that I can deliver the pre-built (minified / linted, etc) JS to them in a single archive and let them edit some sort of properties file to configure it for their needs.
What would the general JavaScript / React best practice be for this sort of use case?
Thanks,
Troy
The easiest solution for me turned out to be to include a tag in my index.html. This gets minified during the NPM build but it does not get bundled with the other javascript so it can easily be replaced with another file at deploy time. My config.js looks like this:
config = {
"title": "Application Title",
"envName": "LocalDev",
"URL": "localhost:8090"
}
Then inside my react components they're accessible by using:
const config = window.config;
alert("Application branding title is: " + config.title);
I will now have various config.js files for each environment (config.js.dev, config.js.uat, config.js.prod, etc) and at deployment I will link or renmae the appropriate one to config.js.
How can we integrate Vue JS with MVC Project that is existing and using with Nuget Package.
Tried with below approach.
<h3>VueJS 2 in ASP.NET MVC 5</h3>
<div id="aboutPage">
{ { message }}
</div>
<script>
var aboutPage = new Vue({
el: '#aboutPage',
data: {
message: 'Hello Vue! in About Page'
}
});
</script>
Question:
Is there need for any additional package like - webpack or gulp, we already have bundle config of MVC?
2.
How can we create separate files or design for each view like:
To separate the service call (to call web api from client side)
separate out the template file.
methods or logic to write in JS.
any example for MVC with VueJS like - controller, view,service, vue JS file is great..
Thanks a lot !
You can use vuejs buy adding it to your layout.
#Scripts.Render("~/node_modules/vue/dist/vue.min.js")
You need to install Nodejs on your machine to use NPM and ES6 features.
For integrate Vue.js in .NET MVC you need module bundler (webpack, gulp),can choose one of this options, the popular is webpack:
1:(Gulp, Browserify), which has some limitations such as supporting only require syntax handling assets. and the setup is kind of complicated.
2:(Webpack), which has a lot of cool things you can do with it, Hot Reload. check this repo
by using webpack, you config it to handle just js files and it will handle js files for build too , upon build each entry will be copied inside Scripts/bundle, also you need some loaders such ass (vue, scss, css and js) for webpack. check this
Webpack uses webpack-dev-server for development which is basically a node.js based server which serves assets (javascript, css etc) that our browsers can interpret. Usually these assets include some development friendly features like Hot Reload. These assets are not minified and are quite different from the ones generated when building for production.
devServer: {
proxy: {
'*': {
target: 'http://localhost:5001',
changeOrigin: true
}
}
},
webpack-dev-server has a feature which can proxy requests from one url to another. In this case, every request from "webpack dev server " will be proxied to your "asp.mvc server". So, if we run our MVC app on http://localhost:5001 and run npm run dev , on port 8086 you should see the same output as from our MVC app.
Answers:
1: yes you have to setup Webpack or Gulp.
2. by using webpack you can all thing for file structuer that you want
check this tree
-app
--libs
----utils
----components
---------commons
---------.......
-----pages
---------.....
check this articles
https://medium.com/corebuild-software/vue-js-and-net-mvc-b5cede228626
http://www.lambdatwist.com/dot-net-vuejs/
If you want to keep the .cshtml files and use MVC as a multipage application, you can take a look at this template as an example or starting point. https://github.com/danijelh/aspnetcore-vue-typescript-template
You can create modules of pages which you want to enhance with Vue and import that bundle.
I have a pretty common design pattern where I have a package that might have a fixture. Example:
Package.onUse(function (api) {
// ...
api.addAssets('fixture.json', 'server');
});
Now I am trying to make a package which consumes these packages and feeds in all of their fixtures (on the server).
I am wondering: is there a way to get all server side assets that have been added by a package? Eg, something like
Assets.getAll().forEach(function (asset) {
})