I have been trying to get Rewrites working in NextJS for my API Paths. It was to avoid CORS issues.
I followed the solution from: NextJs CORS issue.
It is working on localhost but does not work in a production environment (I was deploying on Vercel itself).
I basically tried with all the types of rewrites:
async rewrites() {
return {
beforeFiles: [
{
source: "/api/:path*",
destination: `https://example.com/api/v1/:path*`,
basePath: false,
},
],
afterFiles: [
{
source: "/api/:path*",
destination: `https://example.com/api/v1/:path*`,
basePath: false,
},
],
fallback: [
{
source: "/api/:path*",
destination: `https://example.com/api/v1/:path*`,
basePath: false,
},
],
};
},
This rewrite works on localhost but on production, the rewrite stops working and the API calls go to /api/:path* itself.
The /api path is reserved for their Serverless Functions. Changing the source path to something else would resolve the issue.
Related
I configured project with laravel 9 and everything works. Then I moved the layout and everything is fine too.
When I make a resource build, the site works correctly.
B0ut when vite runs server (0.0.0.0), then all the images that are registered in css do not work.
All images are in the public folder. And I move them over is not an option for me.
csss code:
background-image: url('/img/home/sweets-one.png');
{my_local}/img/home/sweets-one.png - 200
http://0.0.0.0:3000/img/home/sweets-one.png - 404
vite config:
export default defineConfig({
server: {
host: '0.0.0.0',
port: 3000,
open: false,
},
plugins: [
vue(),
laravel({
input: [
// css
'resources/scss/app.scss',
],
refresh: true,
}),
],
});
how can I fix it?
So, If we user docker and local domain with custom port, you need configure Vite also.
For example:
My project use docker and works on the domain: mysite.loc:8080
So, Vite should be configured like this:
export default defineConfig({
server: {
host: 'mysite.loc',
port: 8080,
open: false,
},
plugins: [
vue(),
laravel({
input: [
// css
'resources/scss/app.scss',
],
refresh: true,
}),
],
});
I'm hosting my App on an EC2-instance behind an Elastic Load Balancer which manages my SSL-Certificate. On this EC2-Instance my nginx-configuration is redirecting all http-Requests to https.
I recently switched to Vite which caused me a lot of trouble. When I push my app to the server after calling npm run build my assets are blocked. In the browser console I get:
Mixed Content: The page at 'example.com' was loaded over HTTPS, but requested an insecure ...
My Setup:
vite.config.js
export default defineConfig({
server: {
host: 'localhost',
},
plugins: [
laravel([
'resources/assets/sass/app.sass',
// etc...
]),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
],
});
Setting "https: true" in the server-block didn't help me.
.env
APP_ENV=production
APP_URL=https://example.com
ASSET_URL=https://example.com
In my blade template I'm using the Vite-directive:
#vite('resources/assets/sass/app.sass')
I tried the following solutions:
Setting $proxies = '*' in TrustProxies.php, which doesn't have any effect.
Setting URL::forceScheme('https'); in AppServiceProvider.php, which will load the assets but lead to a lot of other issues.
Somehow the #vite-directive is not resolving my assets as secure assets. With Laravel Mix I could just call secure_asset.
How can I fix this?
In the end I used the TrustedProxies-middleware. However back then I forgot to register it as global middleware.
import fs from 'fs';
const host = 'example.com';
server: {
host,
hmr: {host},
https: {
key: fs.readFileSync(`ssl-path`),
cert: fs.readFileSync(`ssl-cert-path`),
},
},
you should add this to vite.config.js file along with ASSET_URL to your .env file
So I'm getting a routing problem whenever I use nuxt ssr with serverless. When I use either deploy to AWS lambda or use serverless-offline it generates the url prefixed with /{stage}, but nuxt can't seem to handle this and either throws 403, 404 or 500 errors because the routes to static files aren't prefixed with /{stage}.
I have tried adding {stage} to the public path on build, the results in a 404 because now the static file path needs to prefixed with another /{stage}. If I go directly to {stage}/{stage}/_nuxt/{file} it works.
build: {
publicPath: '/{stage}/_nuxt'
}
So looking around I found that I can update the router base to the below
router: {
base: '/{stage}'
}
but now the file only loads if its {stage}/{stage}/{stage}/_nuxt/{file} and removing the publicPath code above doesn't make it work either.
And this is for the static files, when it comes to the actual routes the homepage set at '/' either works but any other pages don't because the nuxt-links to them aren't prefixed with /{stage} or if I add the prefix to the base I get a Cannot GET / error when I visit /{stage}.
I have tried many different ways of doing this such as using express however I have had no luck and any tutorials that I found online are at least 2 years old and the github repos have the same problem. The closest thing I have found on stackoverflow that is somewhat similar to what I have is here but this is for a static site.
Anybody have any ideas? Below is the code for the serverless.yaml, handler.js, nuxt.js, nuxt.config.js.
Github Repo
serverless.yaml
service: nuxt-ssr-lambda
provider:
name: aws
runtime: nodejs12.x
stage: ${env:STAGE}
region: eu-west-1
lambdaHashingVersion: 20201221
environment:
NODE_ENV: ${env:STAGE}
apiGateway:
shouldStartNameWithService: true
functions:
nuxt:
handler: handler.nuxt
events:
- http: ANY /
- http: ANY /{proxy+}
plugins:
- serverless-apigw-binary
- serverless-dotenv-plugin
- serverless-offline
custom:
apigwBinary:
types:
- '*/*'
handler.js
const sls = require('serverless-http')
const binaryMimeTypes = require('./binaryMimeTypes')
const nuxt = require('./nuxt')
module.exports.nuxt = sls(nuxt, {
binary: binaryMimeTypes
})
nuxt.js
const { Nuxt } = require('nuxt')
const config = require('./nuxt.config.js')
const nuxt = new Nuxt({ ...config, dev: false })
module.exports = (req, res) =>
nuxt.ready().then(() => nuxt.server.app(req, res))
nuxt.config.js
module.exports = {
telemetry: false,
head: {
htmlAttrs: {
lang: 'en'
},
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
css: [
],
plugins: [
],
components: true,
buildModules: [
'#nuxtjs/tailwindcss',
],
modules: [
],
router: {
base: '/prod'
},
build: {
}
}
Are you passing it as
<p>Path: {{ $route.path }}</p>
<NuxtLink to="/">Back to Mountains</NuxtLink>
if Yes then it should work else try going with redirect('/{stage}/_nuxt')
for an if statement put this inside else , I think it should work.
I am developing an app using Angular 7 and Apollo GraphQL client and I am trying to use the client devtools for Chrome. If I understood the documentation correctly, the only thing that I have to do is to run my app in a non-production environment and the Apollo tab will appear on the Google Chrome development tools.
Unfortunately this is not happening. The Apollo Devtools icon appears on my browser, but the Apollo tab does not appear on the devtools.
Am I missing some configuration?
I also tried to force the devtools to appear, by adding: connectToDevTools: true to my GraphQL module (code below), but this didn't solve the problem.
const uri = environment.graphqlURL; // <-- add the URL of the GraphQL server here
export function createApollo(httpLink: HttpLink) {
return {
link: httpLink.create({uri}),
cache: new InMemoryCache(),
connectToDevTools: true
};
}
#NgModule({
exports: [ApolloModule, HttpLinkModule],
providers: [
{
provide: APOLLO_OPTIONS,
useFactory: createApollo,
deps: [HttpLink],
},
],
})
export class GraphQLModule {}
I found out what the problem was: I was having a CORS error when I tried to use my Graphql endpoint from the Angular development server (localhost:4200), so I created a proxy that pointed to my endpoint:
{
"/graphql/*": {
"target": "https://my-endpoint/",
"secure": false,
"logLevel": "debug",
"changeOrigin": true
}
}
And changed the Graphql URL to: http://localhost:4200/graphql. With this I was able to solve my CORS issue, however it seems that the Apollo Dev Tools also uses the /graphql URI.
So I changed my proxy configuration to:
{
"/stg_graphql/*": {
"target": "https://my-endpoint/graphql",
"secure": false,
"logLevel": "debug",
"changeOrigin": true,
"pathRewrite": {
"^/stg_graphql": ""
}
}
}
And pointed the graphql to: http://localhost:4200/stg_graphql. When I did this, everything started working.
Note: to run the development server with the proxy I am using: ng serve --proxy-config proxy.config.json.
I have tried following numerous tutorials on connecting Drupal, and GatsbyJS. For instance, in this article, I get to step 4.3b, "Pull Content from the Drupal 8 site using GraphQL" before everything fails.
I have followed every instruction, but GraphQL seems to be pulling from the temporary Gatsby page rather than the Drupal site I made. Queries such as "allNodeBlog" don't exist, and I'm not sure how to fix everything so I can get to pulling information from my Drupal JSON API page rather than the Gatsby site.
Any help/advice would be great. And/or articles that aren't simply the first Googled "Drupal and Gatsby" help sites (as I've looked at them all).
module.exports = {
siteMetadata: {
title: 'Gatsby Default Starter',
},
plugins: [
'gatsby-plugin-react-helmet',
{
resolve: 'gatsby-source-drupal',
options: {
baseUrl: 'http://gatsbydrupal.dd:8083/',
apiBase: 'api', // endpoint of Drupal server
},
},
{
resolve: `gatsby-plugin-manifest`,
options: {
name: 'gatsby-starter-default',
short_name: 'starter',
start_url: '/',
background_color: '#663399',
theme_color: '#663399',
display: 'minimal-ui',
icon: 'src/images/gatsby-icon.png', // This path is relative to the root of the site.
},
},
'gatsby-plugin-offline',
],
}