I"m using Amazon S3 to serve my static assets and user uploads in apostrophe-cms. My site loads with https, but all my assets are loading as http.
I have a cloudfront distribution at the static subdomain of my site, but I'm not sure how I can configure apostrophe-cms to use this for locating my assets.
I believe you can achieve this by specifying the following for your apostrophe-attachments config:
// in ./lib/modules/apostrophe-attachments/index.js
module.exports = {
uploadfs: {
https: true,
cdn: {
enabled: true,
url: 'https://assets.example.com'
}
}
}
Hope that helps!
Related
On my local machine, my React front-end runs on localhost:3000 and my Node/Express back-end
runs on localhost:8080.
Inside webpack.config.js (for my front-end), I use proxy so my front-end can fetch() data from the back-end via the url /api
module.exports = {
//...
devServer: {
proxy: {
'/api': 'http://localhost:8080'
}
}
};
After I deployed my app to Pivotal cloud, the proxy configuration no longer works because it's set to localhost.
How should I configure it so that it's not hard-coded to localhost?
How to update React localhost (127.0.0.1:3000) to another domain (local.example.com)
Might be too late on answer... First configure your hosts file to add local.example.com as your local envir(windows) see link
devServer has a host property
devServer: {
host: 'local.example.com,
port: 80
}
setting the port on 80 will allow you to visit http://local.example.com
I'm trying to create a middleware to redirect all my routes to https, I think I need a middleware so I've created a redirect.js file in the middleware folder of Nuxt and then I've added this to nuxt.config.js:
router: {
middleware: ["redirect"]
},
And here is my redirect.js file that gives me a server error:
export default function({ app }) {
if (process.env.NODE_ENV === "production") {
if (app.context.req.header("x-forwarded-proto") !== "https") {
app.context.res.redirect(`https://${app.context.req.header("host")}${app.context.req.url}`);
}
}
}
I found an easier way i've added the package redirect-ssl
npm i redirect-ssl
and then i've added this line in my nuxt.config.js :
serverMiddleware: ["redirect-ssl"],
You can configure this in heroku.
For Nuxt static mode:
Add the https://github.com/heroku/heroku-buildpack-static.git buildpack after the heroku/nodejs buildpack under buildpacks
Make sure the buildpacks are added in this order to an app.json in the root directory of your project
Add a static.json in the root directory of your project
Make sure root and https_only are set correctly
If you want Nuxt to resolve routes instead of Nginx (so that you don't get the Nginx 404 page when you go to an unknown route), set routes as well.
Example static.json:
{
"root": "dist/",
"routes": {
"/**": "index.html"
},
"https_only": true
}
I am working on a NUXTJs to create server side rendered website. My question is that although there is a assets/static folder in nuxt project structure to serve images & static files, i want to set cdn link for all my image source.
What would be the best approach to do that?
Possible ways I can think of:
Vuex Store - set baseURL for the images and then use in components
env - use environment variable to set the cdn URL
TIA
You can set it via publicPath property in nuxt.config
export default {
build: {
publicPath: 'https://cdn.nuxtjs.org'
}
}
https://nuxtjs.org/api/configuration-build/#publicpath
If you have a team working on the project, use Vuex. It save the baseURL in the project itself. Less hassle to copy/share the env variables to the team.
Alright after spending a couple of hrs, As answered above you can set cdn url to nuxt.config.js file. If you are someone like me who is using CloudFront / S3 bucket, After npm run build. you can create nuxt folder to your s3 bucket and upload everything from .nuxt/dist/client to this folder. the public path looks as follows in nuxt config file
build: {
publicPath: 'https://your-cdn-url.net/nuxt'
}
But for PWA,manifest.json file it is important that the manifest is served from the same domain, and not from the CDN.so you'll have to override the public path.you can find more info here
I'm using nuxt 2.15,syntax has to be exactly like as follows. nuxt.config.js
modules: [
[
'#nuxtjs/pwa',
{
workbox: { publicPath: '/_nuxt/' },
manifest: { publicPath: '/_nuxt/' },
},
],
],
3rd issue that I faced was, I've created categories.json file and uploaded to s3 bucket and was calling from axios, to avoid any cors issue update s3 cors setting as follows
You can find this in s3 bucket -> Permissions then -> scroll below -> () Cross-origin resource sharing (CORS)
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"GET",
"HEAD"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": [],
"MaxAgeSeconds": 3000
}
]
I am working with an Aurelia app that should start at a different page than index.html, but I cannot find where to change that.
Where in an Aurelia app can you set which landing page to use?
This is misunderstanding. index.html page is the default landing page set by web server, not Aurelia. E.g. if you try to get the url e.g.https://stackoverflow.com the web server will give index.html by default. You need to change it in web server.
e.g. using Apache web server directive DirectoryIndex myindex.html
From https://httpd.apache.org/docs/2.4/mod/mod_dir.html:
The DirectoryIndex directive sets the list of resources to look for, when the client requests an index of the directory by specifying a / at the end of the directory name.
When using development server of Aurelia (default webpack-dev-server configured by aurelia-cli), the index.ejs compiles to index.html. You may need to change configuration of HtmlWebpackPlugin in webpack.config.js in order to change generated file from index.html to some other name:
new HtmlWebpackPlugin({
template: 'index.ejs',
filename: 'myindex.html',
...
If you're using the CLI, there is not an easy way to do this. The CLI is mostly for basic use cases, and if you're trying to do something fancy, you're going to have to learn a bit more about JavaScript tooling.
You can still do it and here's how:
Open aurelia_project/tasks/run.js and make sure the server property of the argument to the browserSync function has the index property pointing at the index file you want to use, like this:
let serve = gulp.series(
build,
done => {
browserSync({
online: false,
open: false,
port: 9000,
logLevel: 'silent',
server: {
index: 'my-special-index.html', // Make sure you have this line in there.
baseDir: [project.platform.baseDir],
middleware: [historyApiFallback(), function(req, res, next) {
res.setHeader('Access-Control-Allow-Origin', '*');
next();
}]
}
}
);
I've implemented grunt-ssh plugin in order to download assets from the remote server but with no luck. There're no files listed for download.
Official grunt-ssh site has no explanation about the download method, there're few issue threads only.
My code looks like:
sftp: {
options: {
host: 'assets.xxxxx.xx',
path: '/',
port: 22,
username: 'xxxx',
privateKey: grunt.file.read('/home/xxxxxx/.ssh/id_rsa'),
passphrase: 'xxxxxx',
createDirectories: true,
directoryPermissions: parseInt(755, 8),
srcBasePath: '/home/files/assets/',
destBasePath: '/app/',
showProgress: true,
mode: 'download'
},
files: {
'images/': 'images/*'
}
}
There's no error during sftp execute, connection is established successfully. I've tried changing paths in many ways but still no files for download.
Can someone help or point out for some another grunt ssh plugin.
As grunt-ssh plugin is not well maintained and it's pretty overkill for this task, I solved this with just simple shell command:
scp -r files#assets.xxxxx.xx:/home/files/assets/images/* src/images/
This is done with grunt-shell plugin.