Assets (Image/CSS/jquery) NOT LOADING

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author rockiger

    (@rockiger)

    3 years, 8 months ago

    Did you try to build your app on localhost.

    The package.json doesn’t look like it isn’t edited by ReactPress, thus the assets are not loaded properly.

    The build command should look similar like this. You can edit your package.json manually like this (Assuming the path fits your WordPress installation):

    ...
"build": "PUBLIC_URL=/wp-content/reactpress/apps/[your-app-name]/build react-scripts build"
...

    Let me know, if it helps.

    Btw, the jQuery issue is a separate problem and should have nothing to do with ReactPress – assuming you don’t use jQuery as a dependency in your React app.

    Thread Starter Pawan Singh Bisht

    (@pawanasiaweb)

    3 years, 8 months ago

    This is the package.json file

    {
  "name": "sefali",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "animate.css": "^4.1.1",
    "animate.css-react": "^1.1.0",
    "aos": "^2.3.4",
    "gotham-fonts": "^1.0.3",
    "react": "^18.1.0",
    "react-animate-on-scroll": "^2.1.5",
    "react-animation-on-scroll": "^5.1.0",
    "react-dom": "^18.1.0",
    "react-jquery-plugin": "^1.1.7",
    "react-multi-carousel": "^2.8.2",
    "react-router-dom": "^6.3.0",
    "react-scripts": "^5.0.1",
    "react-slick": "^0.29.0",
    "slick-carousel": "^1.8.1",
    "tachyons": "^4.12.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "PUBLIC_URL=/test react-scripts start",
    "build": "PUBLIC_URL=/wp-content/reactpress/apps/honeweb/build react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

    And I hope you are already aware of the WordPress file structure.

    Also, this is the frontend of the website – http://ec2-43-205-189-241.ap-south-1.compute.amazonaws.com/

    Plugin Author rockiger

    (@rockiger)

    3 years, 8 months ago

    From what I see, your dev system and your live system didn’t match.

    On your dev system you use the slug /test on your live system you use /.

    You need to use /test on your live system too. Please use the exact same app configuration on both systems.

    Thread Starter Pawan Singh Bisht

    (@pawanasiaweb)

    3 years, 7 months ago

    "start": "PUBLIC_URL=/test react-scripts start",
    "build": "PUBLIC_URL=/test/wp-content/reactpress/apps/honeweb/build react-scripts build",

    like this?

    Thread Starter Pawan Singh Bisht

    (@pawanasiaweb)

    3 years, 7 months ago

    It’s weird. After running the build command I got the build folder and I’ve placed this in the route folder but from here I can access the

    /images folder

    Plugin Author rockiger

    (@rockiger)

    3 years, 7 months ago

    With slug I mean the route/url to the WordPress page where your React app is embedded. The public_url of the build script shouldn’t be changed.

    Could you please test your app with localWP first if it works.

    I don’t have any experience with AWS and can’t really support you with it.

    Thread Starter Pawan Singh Bisht

    (@pawanasiaweb)

    3 years, 7 months ago

    Okay fine. Everything is wokring fine.

    Just let me know if I’ll add the build to the live site, root of the site thenit’ll open as

    http://ec2-43-205-189-241.ap-south-1.compute.amazonaws.com/build

    right?

    I want, it should open as http://ec2-43-205-189-241.ap-south-1.compute.amazonaws.com/

    without the slug.

    Plugin Author rockiger

    (@rockiger)

    3 years, 7 months ago

    Oh no, you need to install ReactPress on the live site, create a page there and create the same folder in your reactpress directory and push the build folder there.

    Please refer to the documentation: https://rockiger.com/en/reactpress/getting-started/#deploy

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Assets (Image/CSS/jquery) NOT LOADING’ is closed to new replies.