deploy react js portfolio to netlfy

2022-05-04 10:25 MHD Firass Barakat imported from Stackoverflow

good morning Iam trying to deploy my plain react js portfolio (no backend at all) on free netlify web hosting and all what I got is blank white page and the console show the following :

Failed to load resource: the server responded with a status of 404 ()

I don't know what to do

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)"

Upload code to Firebase Hosting from iPad

Hi everyone and thanks in advance for your help, does any of you uploaded code to Firebase Hosting from an iPad? is there any console app that can be use to do so?

Thanks a lot!
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?
Web hosting - nodeJS

I made a backend web application and frontend, there is no JS application, I run them "npm run start: dev" and "yarn start", that hosting then I have available on localhost: 4000. ... how to now import that hosting to web hosting / domain, can you give me advice on where to buy that web hosting, one that is not very expensive
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"
reactjs project working fine on local...but not working after deployment...any suggestion?

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

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

deploy react js portfolio to netlfy

See also questions close to this topic