I am trying to use recaptcha with sapper, actually I dinamically load the recaptcha CDN in the onMount event of svelte, upto here everything is working well:
but I need to load the reCAPTCHA site key from the server side, something like a .env file, but I cannot find the way to do this from the official documentation, there is an official way to load information into the components from the server side in sapper?
You're not loading the key from the server side, because it's running in the client. The key needs to be present in the client-side JavaScript bundle. The easiest way to include it is by configuring the replace plugin (if you're using Rollup) or the DefinePlugin (in webpack).
In Rollup, update this block in the config:
replace({
'process.browser': true,
'process.env.NODE_ENV': JSON.stringify(mode),
'process.env.RECAPTCHA_KEY': my_recaptcha_key
})
In webpack, update this block:
new webpack.DefinePlugin({
'process.browser': true,
'process.env.NODE_ENV': JSON.stringify(mode),
'process.env.RECAPTCHA_KEY': JSON.stringify(my_recaptcha_key)
})
Then, you can refer to that value in your code:
script.src = `https://www.google.com/recaptcha/api.js?render=${process.env.RECAPTCHA_KEY}`;
In future, please avoid using screenshots to provide code samples — use markdown instead. It makes pages more searchable, more accessible to people using assistive technology, and means that people can copy and paste the code instead of having to retype it.
Related
I'd like to understand how to enable caching in Strapi for a specific (or any) API endpoint. At the moment when the browser hits my endpoint in the response headers I don't see any caching related headers. Is there a way to use etags and have a long cache time to allow the JSON response to be cached?
There is one mention of etags in the docs but I'm not sure how to implement. If anyone can provide more detailed information it would be appreciated.
At least for static files this can be done within Strapi itself. The middlewares documentation suggests, that there is already a middleware called public, which sets a Cache-Control header with its maxAge when it serves the files from the public/ directory.
But if you want to get your uploaded files cached (i.e. files within the public/uploads/ directory), that’s not enough, because the middleware strapi-provider-upload-local (not yet documented) runs first.
A recently published package solves this issue:
npm i strapi-middleware-upload-plugin-cache
Simply activate it by adding or modifying the config/middleware.js file with the following content:
module.exports = ({ env }) => ({
settings: {
'upload-plugin-cache': {
enabled: true,
maxAge: 86400000
}
}
});
I suggest you manage this kind of thing outside of Strapi.
With another service. For example, if you host you app on AWS, you can use CloudFront.
I am starting a new project, Nuxt.js for the frontend and Laravel for the backend.
How can I connect the two?
I have installed a new Nuxt project using create-nuxt-app, and a new laravel project.
As far as I have searched, I figured I need some kind of environment variables.
In my nuxt project, I have added the dotenv package and placed a new .env file in the root of the nuxt project.
And added CORS to my laravel project, as I have been getting an error.
The variables inside are indeed accessible from the project, and im using them
like this:
APP_NAME=TestProjectName
API_URL=http://127.0.0.1:8000
And accessing it like this:
process.env.APP_NAME etc'
To make HTTP calls, I am using the official Axios module of nuxt.js, and to test it i used it in one of the components that came by default.
The backend:
Route::get('/', function () {
return "Hello from Laravel API";
});
and from inside the component:
console.log(process.env.API_URL)//Gives 127.0.0.1:8000
//But this gives undefined
this.$axios.$get(process.env.API_URL).then((response) => {
console.log(response);
});
}
What am I doing wrong here?
I have tried to describe my setup and problem as best as I can. If I overlooked something, please tell me and I will update my question. Thanks.
Taking for granted that visiting https://127.0.0.1:8000/ in your browser you get the expected response, lets see what might be wrong in the front end:
First you should make sure that axios module is initialized correctly. Your nuxt.config.js file should include the following
//inclusion of module
modules: [
'#nuxtjs/axios',
<other modules>,
],
//configuration of module
axios: {
baseURL: process.env.API_URL,
},
Keep in mind that depending on the component's lifecycle, your axios request may be occurring in the client side (after server side rendering), where the address 127.0.0.1 might be invalid. I would suggest that you avoid using 127.0.0.1 or localhost when defining api_uris, and prefer using your local network ip for local testing.
After configuring the axios module as above, you can make requests in your components using just relative api uris:
this.$axios.$get('/').then(response => {
console.log(response)
}).catch(err => {
console.error(err)
})
While testing if this works it is very helpful to open your browser's dev tools > network tab and check the state of the request. If you still don't get the response, the odds are that you'll have more info either from the catch section, or the request status from the dev tools.
Keep us updated!
Nuxt has a routing file stucture to make it easy to set up server side rendering but also to help with maintainability too. This can cause Laravel and Nuxt to fight over the routing, you will need to configure this to get it working correctly.
I'd suggest you use Laravel-Nuxt as a lot of these small problems are solved for you.
https://github.com/cretueusebiu/laravel-nuxt
Throughout the documentation for the new App Bridge, Shopify refers to the shopOrigin value and how it's used to configure the Provider from app-bridge-react but they never specify how to get this value?
The react app is loaded inside of an iframe and the src includes the shopOrigin value as a query string param called shop, but when I try the following code I get the error window is not defined:
const params = queryString.parse(window.location.search);
const config = {
apiKey: process.env.SHOPIFY_API_KEY,
shopOrigin: params.shop,
};
1) Why would I be getting window is not defined in javascript code running in a browser?! This makes no sense to me
2) If this value can be read from of the provided libraries such as #shopufy/app-bridge-react please tell me how
Unless you're using a library tailored specifically to Shopify, you have to manually save the shop origin during OAuth authorization.
Hopefully this Shopify tutorial is of some assistance
The shopOrigin is available within your browser cookies.
If you followed the Shopify development for react and Node.js, you should already saved this after the Shopify authentification.
I am not sure what exactly is the need for shopOrigin, if you just wanted to go to admin section of the shop from client side you can use Redirect in app bridge. otherwise you can store the shop detail on server during auth process and create a get api to retrive the details on client side as needed.
I am using angular2 for web development, and Jenkins for continuous integration, when i release code at the end of every sprint, it gets deployed on CI Server.
But, when users load the UI, they do not get the new UI changes by default, they have to clear the cache ( I do not want users to clear the cache or disable there cache just for this UI)
How can I handle programatically for the browser to not cache old files and reload the new changes by default (atleast in development)
Note:
I presently set:
import { enableProdMode } from '#angular/core';
enableProdMode();
None of the documentation states this to be the reason and removing it does not help either.
Two popular ways of accomplishing this "cache busting" are:
Using a query string on the end of your file request that gives a version number. For example, when you create a javascript file you would name it "my-file.js". Then in your HTML you would request it as:
<script type="text/javascript" src="my-file.js?v=1.0.0"></script>
When you make some changes to your file you update your request to:
<script type="text/javascript" src="my-file.js?v=1.0.1"></script>
You can use whatever query string you want as long as you change it. The browser sees it as a different file, but it should have no effect on what file your server sends as a response.
If you are using a bundler like webpack or systemJS they can automatically include a hash as part of the file name. This hash can change based on the file contents so that when the contents change the file name changes and thus the file is no longer cached. The caveat with this is that you need to update the file name you are requesting in your HTML. Again, most tools have a way to automatically do this for you.
A webpack example config to accomplish this is:
output: {
path: 'dist',
publicPath: '/',
filename: 'js/[name].[chunkhash].js'
},
and then use the HtmlWebpackPlugin to auto-generate your index.html with the correct file names injected (with inject: true):
plugins: [
new HtmlWebpackPlugin({
filename: '../index.html',
template: './index.html',
inject: true
}), ...
More info on webpack file naming:
https://github.com/webpack/docs/wiki/Configuration#output
More info on html webpack plugin:
https://github.com/ampedandwired/html-webpack-plugin#basic-usage
I fixed it using a special .htaccess file. Just uncomment the "BROWSER CACHING" part:
https://gist.github.com/julianpoemp/bcf277cb56d2420cc53ec630a04a3566
This is my first experience with AngularUI Router, so I guess I'm making a newbie error and hope somebody can guide me.
I've configured a single-page application to use Angular UI Router in HTML5 mode and it all seems to work as expected.
.config([
"$stateProvider", "$urlRouterProvider", "$locationProvider",
function ($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider.state("concept", {
url: "/concepts/:conceptKey",
templateUrl: "/templates/concept-view.html",
controller: "conceptViewController",
resolve: {
concept: [
"$stateParams", "conceptsApi",
function ($stateParams, conceptsApi) {
return conceptsApi.getConcept($stateParams.conceptKey);
}
]
}
});
$urlRouterProvider.otherwise("/");
$locationProvider.html5Mode(true);
}
])
However, the same page also contains some links to other static pages on the same site, using relative URLs. Prior to installing Angular routing, these links worked correctly, but now they are broken. Specifically, clicking any one of these links correctly changes the browser address bar, but does not trigger navigation to that destination page.
I assume I need to add something to tell the routing configuration to ignore certain URL patterns, but I haven't found any information that shows me how to do this. Any suggestions please?
Thanks,
Tim
After some investigation I discovered that this issue is not specifically related to Angular UI Router. The same behavior is also present in the native AngularJS routing mechanism and is caused by the link rewriting logic implemented by $location, as described in this documentation.
Further discussion of the problem is here.
I found two possible solutions, both of which seem to work well:
Explicitly target links to static pages: By including the attribute target="_self" in any links to static pages (i.e. pages that fall outside the defined Angular routing scheme) they will be ignored by AngularJS and thus rendered correctly.
Disable link re-writing: When configuring Angular routing in HTML5 mode, two syntax formats are supported. The simplest format ...
$locationProvider.html5Mode(true);
... enables HTML5 mode with the default configuration. However, the long-form syntax provides access to additional configuration properties, one of which solves the above problem by disabling Angular's default behavior of intercepting and re-writing link URLs:
$locationProvider.html5Mode({
enabled: true,
requireBase: false,
rewriteLinks: false
});
I used the 2nd solution and it appears to have no adverse effect on the behavior of URLs defined in the routing scheme. This solution appears to work equally well with Angular UI Router and with native AngularJS routing.