I have a Nuxt frontend deployed to Google App Engine.
Can I deploy Strapi to Netlify? Or is there a platform where I can deploy Strapi for free?
Also after deploying what is the exact setting which needs to be changed in Nuxt?
My settings with apollo.
apollo: {
clientConfigs: {
default: {
httpEndpoint: 'http://localhost:1337/graphql',
},
},
},
#nuxtjs/strapi Settings in Documentation.
modules: ['#nuxtjs/strapi'],
strapi: {
entities: ['restaurants', 'categories'],
url: 'http://localhost:1337'
},
I guess I have to place the Heroku URL in place of localhost:1337 if I use #nuxtjs/strapi which I am not using currently?
What if I want to use apollo? Where should I put the Heroku URL as it has httpEndpoint field for graphql URL?
Strapi needs a Node.js server, so Heroku is a good idea. They do have a free tier dyno that takes some time to spin up but there is no issue since you will use it as a headless CMS.
Once deployed, you'll need to update the URL of Strapi in nuxt.config.js. And I guess that it's pretty much all.
You will have all of your info in their official docs: https://strapi.io/documentation/developer-docs/latest/setup-deployment-guides/deployment/hosting-guides/heroku.html
Related
I have GeoDjango running on a digital ocean droplet and I'm rewriting project from VueJs to NextJs hosted on Vercel.
In Vue we have service pattern connected with store that is responsible for fetching and updating data.
I figured out the fetching part which is quite good but I'm still trying to figure out the best way to update data.
How should I construct the CRUD layer without using the NextJs API folder ( I don't want to have another backend calling my Django backend).
Should I use context?
Should I use middleware?
Should I create custom services? How to call them then? Is there an equivalent of store in NextJs?
I'm asking because I want to avoid cluttering as right now I'm using fetch POST on pages. I'm using NextAuth that gives me a context with jwt token.
Thank you for any hints
For Next.js, you can use rewrites to proxy requests to your backend. This way you can access your existing backend from relative URLs just like if they were in your API routes. You can do this explicitly for each route, Or you can use the incremental adoption pattern which will check for an existing route in your Next.js app before proxying the request back to your django server.
// next.config.js
module.exports = {
async rewrites() {
return {
fallback: [
{
source: '/api/:path*',
destination: `https://your.django.app/api/:path*`,
},
],
}
},
}
there is monorepo for development where are two folders - client, api. Developing on localhost is working very fine. But a problem, of course, is on AWS. My whole setting is in next.config.js which is
async rewrites() {
return [
{
source: '/api/:slug*',
destination: `${process.env.API_URL}/api/:slug*`
},
]
}
but this is not working on AWS Amplify. I suspect that should be more setting in Rewrites and redirects or AWS Cloudfront, but I don`t have any clue. Do you have some experience with that?
Error:
403 Bad request. We can't connect to the server for this app or website at this time. There might be too much traffic or a configuration error. Try again later, or contact the app or website owner. If you provide content to customers through CloudFront, you can find steps to troubleshoot and help prevent this error by reviewing the CloudFront documentation.
Problem was on client folder, where wasn't directory pages/api with any file and AWS CloudFront couldn't detect the directory for some internal settings. Look at the image bellow - There wasn't Path pattern - 'api/*', now it is. :)
I've got a Next.js application that uses AWS Cognito userpools for authentication. I have a custom UI and am using the aws-amplify package directly invoking signIn/signOut/etc... in my code. (I previously used the AWS Hosted UI and had the same problem set out below - I hoped switching and digging into the actual APIs who reveal my problem but it hasn't)
Everything in development (running on localhost) is working correctly - I'm able to login and get access to my current session both in a page's render function using
import { Auth } from 'aws-amplify';
...
export default const MyPage = (props) => {
useEffect(async () => {
const session = await Auth.currentSession();
...
}
...
}
and during SSR
import { withSSRContext } from 'aws-amplify';
...
export async function getServerSideProps(context) {
...
const SSR = withSSRContext(context);
const session = await SSR.Auth.currentSession();
...
}
However, when I deploy to AWS Amplify where I run my staging environment, the call to get the current session during SSR fails. This results in the page rendering as if the user is not logged in then switching when the client is able to determine that the user is in fact logged in.
Current Hypothesis - missing cookies(??):
I've checked that during the login process that the AWS cookies are being set correctly in the browser. I've also checked and devtools tells me the cookies are correctly being sent to the server with the request.
However, if I log out context.req.headers inside getServerSideProps in my staging environment, the cookie header is missing (whereas in my dev environment it appears correctly). If this is true, this would explain what I'm seeing as getServerSideProps isn't seeing my auth tokens, etc... but I can't see why the cookie headers would be stripped?
Has anyone seen anything like this before? Is this even possible? If so, why would this happen? I assume I'm missing something, e.g. config related, but I feel like I've followed the docs pretty closely - my current conf looks like this
Amplify.configure({
Auth: {...}
ssr: true
});
Next.js version is 11.1.2 (latest)
Any help very much appreciated!
You have to use Next#11.0.0 to use getServerSideProps, withSSRContext and Auth module in production.
I had same issue.
My solution was that disconnect a branch has an authentication problem once and reconnect the branch.
What are your build settings? I guess you are using next build && next export in which case this getServerSideProps shall not work. See https://nextjs.org/docs/advanced-features/static-html-export#unsupported-features
To use SSR with AWS amplify see https://docs.aws.amazon.com/amplify/latest/userguide/server-side-rendering-amplify.html#redeploy-ssg-to-ssr or consider deploying on a node server that is actually a server that you can start with next start like AWS EC2 or deploy on Vercel.
Otherwise if you use next export have to make do with client side data fetch only with client side updates only and cannot use dynamic server side features of nextjs.
One reason for context.req.headers not having any cookie in it is because CloudFront distribution is not forwarding any cookies.
This “CloudFront Behaviour” can be changed in two ways:
Forward all cookies, OR
Forward specified cookies (i.e. array of cookie names)
To change the behaviour, navigate to CloudFront on AWS console > Distributions > your_distribution > Behaviors Tab.
Then Edit existing or Create new behaviour > Change cookies settings (for example set it to "All")
We've built a framework around Nuxt to get it to work with WordPress really well. We have been pulling our hair out trying to get post previewing working.
A common setup will be a WordPress install running on a domain like http://api.example.com and then to have Nuxt running on http://www.example.com. There is a WordPress plugin called WP-Graph-QL that creates a GraphQL endpoint like http://api.example.com/graphql, and we wrote a CORS plugin to set the correct CORS headers to work with whatever the frontend origin may be. This is that plugin if you are curious https://github.com/funkhaus/wp-graphql-cors
Our Nuxt Apollo setup is this:
export default function() {
return {
httpEndpoint: process.env.DEFAULT_ENDPOINT,
getAuth: () => process.env.BASIC_API_TOKEN || "",
httpLinkOptions: {
credentials: "include"
}
}
}
FYI sometimes the API will be hidden behind a Basic Auth UN/PW (like when on a staging site for example), that is what the getAuth function is doing.
This all seems to work client side, but it fails on SSR for some reason. It seems the cookies don't get sent in the SSR request, but they do in the client side request. Am I missing something super obvious here?
NOTE: I asked this question here 8 days, but am trying here for more attention
I am having Facebook and Google user accounts in my meteor app. I did setup them using accounts-ui package using the nice default UI of it. But I removed the default UI and added some custom buttons. How to reconfigure the private and public keys when deploying now? I am using mup to deploy.
I believe there was something like settings.json and settings.production.json
You make mup use the latter one.
Edit: or it was settings.development.json and settings.json, the latter one is the default?
You could use a production or development settings file for deploying
your apps:
http://themeteorchef.com/snippets/making-use-of-settings-json/
meteor deploy example.meteor.com --settings setting-production.json
setting-production.json =>
{
"kadira": {
"appId": "XXXXXXXXXXXXX",
"appSecret": "XXXXXXXXXXXXXXXXXXXXXXX"
},
"reCaptcha": {
"secretKey": "XXXXXXXXXXXXXXXXXXXXXXX"
},
"public": {
"reCaptcha": {
"siteKey": "XXXXXXXXXXXXXXXXXXXXN"
}
}
}