reactjs project working fine on local...but not working after deployment...any suggestion?

2022-05-06 12:08 cori6 imported from Stackoverflow

I'm trying to deploy my first reactjs app. (It's a quiz app) In local the app is working fine.. after deploy is not working as expected. Here you can find the deploy version and a soon you start to play answering the first question you will notice the problem that the question is not changing. Here is the github repository. I did google a lot , I try to deploy it in both github and netlify but I can't manage to resolve this problem. Any help is appreciate. Thanks

See also questions close to this topic

how to change prettier format for react native

my code formatting prettier didn't works well for react native, i don't understand where to config it but it works well with flutter

from this code

      import { View, Text } from 'react-native'
    
    import React from 'react'
    
    export default function App() {
      return (
        <View>
    
    <Text>Apps</Text>   
</View>
      )
    }

it's formatted to this

import {
  View,
  Text
} from 'react-native'

import React from 'react'

export default function App() {
  return ( <
    View >

    <
    Text > Apps < /Text>


    <
    /View>
  )
}

react-router-dom v6 params only numbers
I want add number regex in may param in react-router-dom v6. it work fin in v5 like it:
```
 <Route path="list/:id(\d+)" element={<MyComponent/>} /> 
```
but it not work in v6.

How can I fixed my problem"FirebaseError: Firebase: Error (auth/invalid-api-key)."

My environment variable is ok. No comas and name mistakes but they given me error like "FirebaseError: Firebase: Error (auth/invalid-api-key)". How can I fixed it. Please Help me...

This my .env file

REACT_APP_apiKey=AIzaSyBWobnhbdeMdNpXXXXXXXXXXXXXXXXXXXX
REACT_APP_authDomain=XXXXX.firebaseapp.com
REACT_APP_projectId=XXXX
REACT_APP_storageBucket=XXXXX.appspot.com
REACT_APP_messagingSenderId=4997390XXXXX
REACT_APP_appId=1:4997390XXXXX:web:cc7bc80aa1bdb78fXXXXXX
REACT_APP_measurementId=G-M1XDXXXXXX

This my firebase config file

const firebaseConfig = {
  apiKey: process.env.REACT_APP_apiKey,
  authDomain: process.env.REACT_APP_authDomain,
  projectId: process.env.REACT_APP_projectId,
  storageBucket: process.env.REACT_APP_storageBucket,
  messagingSenderId: process.env.REACT_APP_messagingSenderId,
  appId: process.env.REACT_APP_appId,
  measurementId: process.env.REACT_APP_measurementId,
};

when I debugging firebaseConfig object

console.log(firebaseConfig.apiKey);  ==========> undefined 
console.log(firebaseConfig.authDomain);  ==========> undefined 
console.log(firebaseConfig.projectId);  ==========> undefined 
console.log(firebaseConfig.storageBucket); ==========> undefined 
console.log(firebaseConfig.measurementId); ==========> undefined 
console.log(firebaseConfig.appId); ==========> undefined 
console.log(firebaseConfig.measurementId); ==========> undefined

client side given error this "FirebaseError: Firebase: Error (auth/invalid-api-key)"

How to host go api on GCP

I am new to this deployment and on my local computer my project api written in GOLANG which is already dockerized and uses mariadb as backend. It will execute on port 8080 when I run the command "docker-compose up". What are the different ways to deploy on GCP and which one is the easy one?
Hosting a Strapi 4 + Gatsby 4 website in the same NodeJs server

I am working on a business site with Events and Blog page that can be updated. For this I have chosen Gatsby 4 and Strapi 4. But in most of the tutorials, they have hosted these two separately like Heroku and Netlify/Digital Ocean. I am hoping for a cost effective NodeJs server from a local hosting service. How can I use the same NodeJS server to deploy a Gatsby 4 + Strapi 4 website?

bundle : The term 'bundle' is not recognized as the name of a cmdlet, function, script file, or operable program

it is my first question in STACK! I'm trying to create Github pages account using https://startbootstrap.com/theme/clean-blog-jekyll.

In the terminal i'm getting following error message:

> bundle : The term 'bundle' is not recognized as the name of a  cmdlet,
> function, script file, or operable program. Check the  spelling of the
> name, or if a path was included, verify that the  path is correct and
> try again. At line:1 char:1
> + bundle exec jekyll serve
> + ~~~~~~
>     + CategoryInfo          : ObjectNotFound: (bundle:String) [], 
>     CommandNotFoundException
>     + FullyQualifiedErrorId : CommandNotFoundException

I've tried bundle install but not worked.

Multiple branch hosting on Github

I have a React app project which has 3 different environments for the development of new features - dev, staging, and prod. Is there some way I can have 3 different hosting in the same repo for the respective environments?

Current Approach: Currently I have 3 different repo - react-app-dev,react-app-staging, and react-app-prod and each repo are configured for hosting deployments using Github pages with a custom domain. The main issue with this approach is having 3 repo with almost the same code which just does not feels right and also the difficulty while feature migration from dev to staging or to prod as sometimes the git history differs in the repo.
Nextauth Twitter - Function not found with Netlify dev

I couldn't find any reference to this and finally managed to solve problem.

When using Nextauth with Twitter (and probably other providers) you get a 'Function not found...' error if you are using Netlify dev.

Error in the console is: "Warning: Missing form submission function handler"

Netlify CMS not saving hidden fields

Issue I am using Netlify and Gatsby, actually working with this template to learn these systems. I can see in the pre-made files that there are hidden widgets in the admin/config.yml file for the CMS:

I am attempting create a new page with some widgets in the CMS:

- file: "src/pages/sidebar/index.md"
    label: "Sidebar"
    name: "sidebar"
    fields:
      - { 
          label: "Template Key", 
          name: "templateKey", 
          widget: "hidden", 
          default: "sidebar-page",
        }
      - { label: Title, name: title, widget: string }
      - { label: Subtitle, name: subtitle, widget: string }
      - { label: Body, name: body, widget: markdown }
      - { label: Sidebar Title, name: sidebartitle, widget: string }
      - { label: Sidebar Content, name: sidebarcontent, widget: markdown }

The normal fields all appear in the CMS, and they all get saved to the appropriate .md file in the path that I specified. However, the hidden fields are not being saved. This is resulting in build failures because GraphQL is attempting to build a page that doesn't exist, since the hidden templateKey field is supposed to be directing it to the appropriate Gatsby component. This is only occurring for new pages that I am creating. If I remove the templateKey field from a page that came with the template, it will resave that hidden field when I update the page in the CMS.

I am using the netlify-cms-proxy-server, but even if I send the CMS updates to my remote repo, the hidden fields are not saved.

I only found a couple other references to things tangentially related, and those are from years ago, so I suspect that it's something that I am doing that's preventing these from saving for my new pages.

If I manually add the templateKey field into my sidebar page's .md file, Gatsby will compile and the page will render. I can then edit the page in the CMS, save new content to the .md file, and the templateKey field will remain. Saving a new version does not remove the templateKey field.

I have also created an Issue on the template's github repository to try and get some insight from those involved there.

Here is my gatsby-config, gatsby-node, and config.yml files as well, if those are helpful:

Netlify CMS Config

backend:
  name: git-gateway
  branch: main
  commit_messages:
    create: "Create {{collection}} “{{slug}}”"
    update: "Update {{collection}} “{{slug}}”"
    delete: "Delete {{collection}} “{{slug}}”"
    uploadMedia: "[skip ci] Upload “{{path}}”"
    deleteMedia: "[skip ci] Delete “{{path}}”"

local_backend: true
media_folder: static/img
public_folder: /img

collections:
  - name: "blog"
    label: "Blog"
    folder: "src/pages/blog"
    create: true
    slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
    fields:
      - {
          label: "Template Key",
          name: "templateKey",
          widget: "hidden",
          default: "blog-post",
        }
      - { label: "Title", name: "title", widget: "string" }
      - { label: "Publish Date", name: "date", widget: "datetime" }
      - { label: "Description", name: "description", widget: "text" }
      - { label: "Featured Post", name: "featuredpost", widget: "boolean" }
      - { label: "Featured Image", name: "featuredimage", widget: image }
      - { label: "Body", name: "body", widget: "markdown" }
      - { label: "Tags", name: "tags", widget: "list" }

  - name: "pages"
    label: "Pages"
    files:
      - file: "src/pages/index.md"
        label: "Landing Page"
        name: "index"
        fields:
          - {
              label: "Template Key",
              name: "templateKey",
              widget: "hidden",
              default: "index-page",
            }
          - { label: Title, name: title, widget: string }
          - { label: Image, name: image, widget: image }
          - { label: Heading, name: heading, widget: string }
          - { label: Subheading, name: subheading, widget: string }
          - {
              label: Mainpitch,
              name: mainpitch,
              widget: object,
              fields:
                [
                  { label: Title, name: title, widget: string },
                  { label: Description, name: description, widget: text },
                ],
            }
          - { label: Description, name: description, widget: string }
          - {
              label: Intro,
              name: intro,
              widget: object,
              fields:
                [
                  { label: Heading, name: heading, widget: string },
                  { label: Description, name: description, widget: text },
                  {
                    label: Blurbs,
                    name: blurbs,
                    widget: list,
                    fields:
                      [
                        { label: Image, name: image, widget: image },
                        { label: Text, name: text, widget: text },
                      ],
                  },
                ],
            }
          - {
              label: Main,
              name: main,
              widget: object,
              fields:
                [
                  { label: Heading, name: heading, widget: string },
                  { label: Description, name: description, widget: text },
                  {
                    label: Image1,
                    name: image1,
                    widget: object,
                    fields:
                      [
                        { label: Image, name: image, widget: image },
                        { label: Alt, name: alt, widget: string },
                      ],
                  },
                  {
                    label: Image2,
                    name: image2,
                    widget: object,
                    fields:
                      [
                        { label: Image, name: image, widget: image },
                        { label: Alt, name: alt, widget: string },
                      ],
                  },
                  {
                    label: Image3,
                    name: image3,
                    widget: object,
                    fields:
                      [
                        { label: Image, name: image, widget: image },
                        { label: Alt, name: alt, widget: string },
                      ],
                  },
                ],
            }
      - file: "src/pages/about/index.md"
        label: "About"
        name: "about"
        fields:
          - {
              label: "Template Key",
              name: "templateKey",
              widget: "hidden",
              default: "about-page",
            }
          - { label: "Title", name: "title", widget: "string" }
          - { label: "Body", name: "body", widget: "markdown" }
      - file: "src/pages/products/index.md"
        label: "Products Page"
        name: "products"
        fields:
          - {
              label: "Template Key",
              name: "templateKey",
              widget: "hidden",
              default: "product-page",
            }
          - { label: Title, name: title, widget: string }
          - { label: Image, name: image, widget: image }
          - { label: Heading, name: heading, widget: string }
          - { label: Description, name: description, widget: string }
          - {
              label: Intro,
              name: intro,
              widget: object,
              fields:
                [
                  { label: Heading, name: heading, widget: string },
                  { label: Description, name: description, widget: text },
                  {
                    label: Blurbs,
                    name: blurbs,
                    widget: list,
                    fields:
                      [
                        { label: Image, name: image, widget: image },
                        { label: Text, name: text, widget: text },
                      ],
                  },
                ],
            }
          - {
              label: Main,
              name: main,
              widget: object,
              fields:
                [
                  { label: Heading, name: heading, widget: string },
                  { label: Description, name: description, widget: text },
                  {
                    label: Image1,
                    name: image1,
                    widget: object,
                    fields:
                      [
                        { label: Image, name: image, widget: image },
                        { label: Alt, name: alt, widget: string },
                      ],
                  },
                  {
                    label: Image2,
                    name: image2,
                    widget: object,
                    fields:
                      [
                        { label: Image, name: image, widget: image },
                        { label: Alt, name: alt, widget: string },
                      ],
                  },
                  {
                    label: Image3,
                    name: image3,
                    widget: object,
                    fields:
                      [
                        { label: Image, name: image, widget: image },
                        { label: Alt, name: alt, widget: string },
                      ],
                  },
                ],
            }
          - {
              label: Testimonials,
              name: testimonials,
              widget: list,
              fields:
                [
                  { label: Quote, name: quote, widget: string },
                  { label: Author, name: author, widget: string },
                ],
            }
          - { label: Full_image, name: full_image, widget: image }
          - {
              label: Pricing,
              name: pricing,
              widget: object,
              fields:
                [
                  { label: Heading, name: heading, widget: string },
                  { label: Description, name: description, widget: string },
                  {
                    label: Plans,
                    name: plans,
                    widget: list,
                    fields:
                      [
                        { label: Plan, name: plan, widget: string },
                        { label: Price, name: price, widget: string },
                        {
                          label: Description,
                          name: description,
                          widget: string,
                        },
                        { label: Items, name: items, widget: list },
                      ],
                  },
                ],
            }
      - file: "src/pages/sidebar/index.md"
        label: "Sidebar"
        name: "sidebar"
        fields:
          - { 
              label: "Template Key", 
              name: "templateKey", 
              widget: "hidden", 
              default: "sidebar-page",
            }
          - { label: Title, name: title, widget: string }
          - { label: Subtitle, name: subtitle, widget: string }
          - { label: Body, name: body, widget: markdown }
          - { label: Sidebar Title, name: sidebartitle, widget: string }
          - { label: Sidebar Content, name: sidebarcontent, widget: markdown }

Gatsby Config

module.exports = {
  siteMetadata: {
    title: "Gatsby + Netlify CMS Starter",
    description:
      "This repo contains an example business website that is built with Gatsby, and Netlify CMS.It follows the JAMstack architecture by using Git as a single source of truth, and Netlify for continuous deployment, and CDN distribution.",
  },
  plugins: [
    "gatsby-plugin-react-helmet",
    {
      resolve: "gatsby-plugin-sass",
      options: {
        sassOptions: {
          indentedSyntax: false,
        },
      },
    },
    {
      // keep as first gatsby-source-filesystem plugin for gatsby image support
      resolve: "gatsby-source-filesystem",
      options: {
        path: `${__dirname}/static/img`,
        name: "uploads",
      },
    },
    {
      resolve: "gatsby-source-filesystem",
      options: {
        path: `${__dirname}/src/pages`,
        name: "pages",
      },
    },
    {
      resolve: "gatsby-source-filesystem",
      options: {
        path: `${__dirname}/src/img`,
        name: "images",
      },
    },
    `gatsby-plugin-image`,
    "gatsby-plugin-sharp",
    "gatsby-transformer-sharp",
    {
      resolve: "gatsby-transformer-remark",
      options: {
        plugins: [
          {
            resolve: "gatsby-remark-relative-images",
            options: {
              name: "uploads",
            },
          },
          {
            resolve: "gatsby-remark-images",
            options: {
              // It's important to specify the maxWidth (in pixels) of
              // the content container as this plugin uses this as the
              // base for generating different widths of each image.
              maxWidth: 2048,
            },
          },
          {
            resolve: "gatsby-remark-copy-linked-files",
            options: {
              destinationDir: "static",
            },
          },
        ],
      },
    },
    {
      resolve: "gatsby-plugin-netlify-cms",
      options: {
        modulePath: `${__dirname}/src/cms/cms.js`,
      },
    },
    {
      resolve: "gatsby-plugin-purgecss", // purges all unused/unreferenced css rules
      options: {
        develop: true, // Activates purging in npm run develop
        purgeOnly: ["/style.scss"], // applies purging only on the bulma css file
      },
    }, // must be after other CSS plugins
    "gatsby-plugin-netlify", // make sure to keep it last in the array
  ],
};

Gatsby Node

const _ = require('lodash')
const path = require('path')
const { createFilePath } = require('gatsby-source-filesystem')
const { fmImagesToRelative } = require('gatsby-remark-relative-images')

exports.createPages = ({ actions, graphql }) => {
  const { createPage } = actions

  return graphql(`
    {
      allMarkdownRemark(limit: 1000) {
        edges {
          node {
            id
            fields {
              slug
            }
            frontmatter {
              tags
              templateKey
            }
          }
        }
      }
    }
  `).then((result) => {
    if (result.errors) {
      result.errors.forEach((e) => console.error(e.toString()))
      return Promise.reject(result.errors)
    }

    const posts = result.data.allMarkdownRemark.edges

    posts.forEach((edge) => {
      const id = edge.node.id
      createPage({
        path: edge.node.fields.slug,
        tags: edge.node.frontmatter.tags,
        component: path.resolve(
          `src/templates/${String(edge.node.frontmatter.templateKey)}.js`
        ),
        // additional data can be passed via context
        context: {
          id,
        },
      })
    })

    // Tag pages:
    let tags = []
    // Iterate through each post, putting all found tags into `tags`
    posts.forEach((edge) => {
      if (_.get(edge, `node.frontmatter.tags`)) {
        tags = tags.concat(edge.node.frontmatter.tags)
      }
    })
    // Eliminate duplicate tags
    tags = _.uniq(tags)

    // Make tag pages
    tags.forEach((tag) => {
      const tagPath = `/tags/${_.kebabCase(tag)}/`

      createPage({
        path: tagPath,
        component: path.resolve(`src/templates/tags.js`),
        context: {
          tag,
        },
      })
    })
  })
}

exports.onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions
  fmImagesToRelative(node) // convert image paths for gatsby images

  if (node.internal.type === `MarkdownRemark`) {
    const value = createFilePath({ node, getNode })
    createNodeField({
      name: `slug`,
      node,
      value,
    })
  }
}

Related questions

reactjs project working fine on local...but not working after deployment...any suggestion?

See also questions close to this topic