I',m Tailwind css for my Next project and it looks like it is not getting cached.
Website URL: https://elaborate-hotteok-0c5bac.netlify.app
Do I need to do something to make sure the static content like CSS and basic JS should get chached on the production?
Here is the SS even after loading the page twice
https://prnt.sc/rt3d2rGKORrV
https://prnt.sc/2bLNlII1QcIB
And here is my tailwind config file
module.exports = {
content: [
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
'./app/**/*.{js,ts,jsx,tsx}',
'./templates/**/*.{js,ts,jsx,tsx}',
],
theme: {
extend: {},
},
plugins: [],
}
And next config file
module.exports = {
reactStrictMode: false,
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'cdn.shopify.com',
},
],
},
}
enter code here
Related
I serve my site over this url.
Here is the code that I have in my next.config.js file for the cache policy:
module.exports = {
...
async headers() {
return [
{
source: '/:all*(svg|jpg|png|gif)',
locale: false,
headers: [
{
key: 'Cache-Control',
value: 'public, max-age=5184000, must-revalidate',
},
],
},
]
},
}
If you access the website with Chrome, there is no issue. But with Firefox, here is what you get:
Basically, the images are not being loaded correctly, and I don't understand the error... The other elements are being loaded correctly.
Another weird thing is that:
If I do "Ctrl+Shift+R", none of the images will load.
If I do "Ctrl+R", some will succeed to load.
It's as if the server needed some time before being able to load the images. I don't know NextJS enough to debug that, though...
I finally nailed it!
Basically, custom protocol handlers like: window.open(myprotocol://open${params}, '_self') are immediately stopping the page from loading on Firefox. I'm not sure if this is expected, though.
I just had to wait for the page to load:
React.useEffect(() => {
const onLoad = () => window.open(`myprotocol://open${params}`, '_self')
window.addEventListener('load', onLoad)
return () => window.removeEventListener('load', onLoad)
}, [])
I need help in running my Vue spa in the same domain as my laravel app , when running "npm run serve" in terminal I think it's working but when I go to the browser it's refusing connection. I haven't done the backend which I will use sanctum for handling API. Has anybody here have the same project working on like me? love to make conversations to solve this.
Thanks in advance
here is the vue.config.js file
const path = require('path')
const webpack = require('webpack')
const createThemeColorReplacerPlugin = require('./config/plugin.config')
function resolve (dir) {
return path.join(__dirname, dir)
}
/**
* check production or preview(pro.loacg.com only)
* #returns {boolean}
*/
function isProd () {
return process.env.NODE_ENV === 'production'
}
const assetsCDN = {
css: [],
// https://unpkg.com/browse/vue#2.6.10/
js: [
'//cdn.jsdelivr.net/npm/vue#2.6.10/dist/vue.min.js',
'//cdn.jsdelivr.net/npm/vue-router#3.1.3/dist/vue-router.min.js',
'//cdn.jsdelivr.net/npm/vuex#3.1.1/dist/vuex.min.js',
'//cdn.jsdelivr.net/npm/axios#0.19.0/dist/axios.min.js'
]
}
// webpack build externals
const prodExternals = {
vue: 'Vue',
'vue-router': 'VueRouter',
vuex: 'Vuex',
axios: 'axios'
}
// vue.config.js
const vueConfig = {
configureWebpack: {
// webpack plugins
plugins: [
// Ignore all locale files of moment.js
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
],
// if prod is on, add externals
externals: isProd() ? prodExternals : {}
},
chainWebpack: (config) => {
config.resolve.alias
.set('#$', resolve('src'))
const svgRule = config.module.rule('svg')
svgRule.uses.clear()
svgRule
.oneOf('inline')
.resourceQuery(/inline/)
.use('vue-svg-icon-loader')
.loader('vue-svg-icon-loader')
.end()
.end()
.oneOf('external')
.use('file-loader')
.loader('file-loader')
.options({
name: 'assets/[name].[hash:8].[ext]'
})
// if prod is on
// assets require on cdn
if (isProd()) {
config.plugin('html').tap(args => {
args[0].cdn = assetsCDN
return args
})
}
},
css: {
loaderOptions: {
less: {
modifyVars: {
// less vars，customize ant design theme
'primary-color': '#00B4E4',
// 'link-color': '#F5222D',
'border-radius-base': '4px'
},
javascriptEnabled: true
}
}
},
}
if (process.env.VUE_APP_PREVIEW === 'true') {
vueConfig.configureWebpack.plugins.push(createThemeColorReplacerPlugin())
}
module.exports = vueConfig
module.exports = {
devServer: {
host: 'app.paymate-ui.test'
}
}
If I understand you correctly, you want to use Laravel and Vue.js together in the same application folder?
Should be pretty easy then.
First off, build your application with Vue scaffolding for the frontend.
Then, make a route that redirects everything to a single controller method that returns a spa view. (Or use a closure)
In this view, include your app.js as an asset and include the main Vue component (something like <app></app>).
Then build your Vue app. All requests will now be forwarded to the spa view, which includes your app.js, which should bootstrap Vue.
I deployed my 1st Nuxt.js app to Heroku...Everything went smooth but when I opened the app I realised that every .vue file/component has TailwindCSS styles up untill SM breakpoint. Mobile view is fine, but anything bigger than SM breakpoint is not apllied. I also used Purgecss to remove unused styles but not sure if that can cause the problems... Any ideas on how to fix this?
I fixed my problem just by finding this https://github.com/nuxt/nuxt.js/issues/2262
I created modules folder and added import-tailwind-config.js with the code:
module.exports = function () {
const tailwindConfig = require('#nuxtjs/tailwindcss')
this.options.env.tailwind = tailwindConfig
}
And inside nuxt.config.js, outside of module.exports I added
const PurgecssPlugin = require('purgecss-webpack-plugin')
const glob = require('glob-all')
const path = require('path')
class TailwindExtractor {
static extract (content) {
return content.match(/[A-z0-9-:/]+/g) || []
}
}
As well as this code inside of module.exports
build: {
extend (config, ctx) {
config.plugins.push(
new PurgecssPlugin({
whitelist: ['html', 'body'],
paths: glob.sync([
path.join(__dirname, 'components/**/*.vue'),
path.join(__dirname, 'layouts/**/*.vue'),
path.join(__dirname, 'pages/**/*.vue'),
path.join(__dirname, 'plugins/**/*.vue')
]),
extractors: [{
extractor: TailwindExtractor,
extensions: ['html', 'js', 'vue']
}]
})
)
}
}
modules: [
'~modules/import-tailwind-config'
]
I am using swagger api documentation tool for my backend, and I need to view the contents of the .yaml file in the browser when the url is called. But instead, I always end up having the file downloaded.
This is the content of my SwaggerUI tag:
<script>
window.onload = function() {
// Build a system
const ui = SwaggerUIBundle({
url: "./app.yaml",
dom_id: '#swagger-ui',
deepLinking: true,
presets: [
SwaggerUIBundle.presets.apis,
SwaggerUIStandalonePreset
],
plugins: [
SwaggerUIBundle.plugins.DownloadUrl
],
layout: "StandaloneLayout"
})
window.ui = ui
}
</script>
I want to use Webpack in order to create one single scripts.js file out of all needed Javascript files.
Within my main.js I require three modules:
require('jquery');
require('readmore');
require('foundation');
My webpack.config.js is this:
var path = require('path');
module.exports = {
entry: ["./js/main.js"],
output: {
path: path.resolve(__dirname, 'build'),
filename: "scripts.js"
},
resolve: {
modulesDirectories: ["bower_components", "node_modules"],
alias: {
jquery: '../bower_components/jquery/dist/jquery.js',
readmore: '../node_modules/readmore-js/readmore.js',
foundation: '../bower_components/foundation-sites/dist/js/foundation.js'
}
}
}
My problem: as readmore-js is a jQuery-Plugin it requires jQuery by itself.
I got this error after running Webpack:
ERROR in ./~/readmore-js/readmore.js
Module not found: Error: Can't resolve 'jquery' in '/Users/myName/www/myProject/node_modules/readmore-js'
# ./~/readmore-js/readmore.js 17:4-31
# ./js/main.js
# multi main
From my understanding the problem is that readmore also wants to load the module jQuery within the directory "nodes_modules". My first approach was to resolve this problem by adding moduleDirectories to the config-file, but it does still not work.
And even in this case, the plugin shouldn't load jQuery again.
Do you have any idea how I can load jQuery globally and then "tell" all modules which require jQuery by themself "look, it's there!"
As it may helps, the following is copied out of the plugin's readmore.js:
(function(factory) {
if (typeof define === 'function' && define.amd) {
// AMD
define(['jquery'], factory);
} else if (typeof exports === 'object') {
// CommonJS
module.exports = factory(require('jquery'));
} else {
// Browser globals
factory(jQuery);
}
}
You can use webpack.ProvidePlugin for this:
Remove require jquery from main.js:
require('readmore');
require('foundation');
Configure webpack.ProvidePlugin inside webpack.config.js:
var path = require('path');
module.exports = {
entry: ["./js/main.js"],
output: {
path: path.resolve(__dirname, 'build'),
filename: "scripts.js"
},
resolve: {
modulesDirectories: ["bower_components", "node_modules"],
alias: {
readmore: '../node_modules/readmore-js/readmore.js',
foundation: '../bower_components/foundation-sites/dist/js/foundation.js'
}
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
}),
]
}