Css is not loading properly in build

[sanjeevyadavIT]

🐛 Bug Report

I want to deploy the build folder, but the build folder css is all messed up. The pages has no styling. When I'm running in development mode the pages are loading fine, but in build mode, pages are not loading properly. Please see attached photos

Have you read the Contributing Guidelines on issues?

Yes

To Reproduce

1. Clone the repo
   git clone https://github.com/react-native-bootstrap/react-native-bootstrap
2. cd into website folder
   cd website
3. Start development server and see website is working fine
   yarn start
4. Not build the static website & open index.html in build folder
   yarn build

Expected behavior

The website should have looked like this

Running index.html file from build folder should have worked fine, so that I can deploy it on github pages

Actual Behavior

Website looks like this after deploying build folder in gh-pages

Your Environment

• Docusaurus version used: 2.0.0-alpha.56
• Firefox 76.0.1 (64-bit)
• Node.js v10.15.3
• Operating system and version (desktop or mobile): Ubuntu 18.04

Reproducible Demo

The entire code is present here https://github.com/react-native-bootstrap/react-native-bootstrap/tree/master/website

[yangshun]

Make sure the baseUrl in docusaurus.config.js is not empty if your website has one.

…

On Mon, Jun 1, 2020, 2:24 AM Sanjeev yadav ***@***.***> wrote: 🐛 Bug Report I want to deploy the build folder, but the build folder css is all messed up. The pages has no styling. When I'm running in development mode the pages are loading fine, but in build mode, pages are not loading properly. Please see attached photos Have you read the Contributing Guidelines on issues <https://github.com/facebook/docusaurus/blob/master/CONTRIBUTING.md#reporting-new-issues> ? Yes To Reproduce 1. Clone the repo git clone https://github.com/react-native-bootstrap/react-native-bootstrap 2. cd into website folder cd website 3. Start development server and see website is working fine yarn start 4. Not build the static website & open index.html in build folder yarn build Expected behavior The website should have looked like this [image: Screenshot_2020-05-31 React Native Bootstrap React Native Bootstrap(1)] <https://user-images.githubusercontent.com/13250741/83359643-2e47c280-a399-11ea-90eb-b7bda24b21df.png> Running index.html file from build folder should have worked fine, so that I can deploy it on github pages Actual Behavior Website looks like this after deploying build folder in gh-pages [image: Screenshot_2020-05-31 React Native Bootstrap React Native Bootstrap] <https://user-images.githubusercontent.com/13250741/83359639-212ad380-a399-11ea-8a53-3585d355e984.png> Your Environment - Docusaurus version used: 2.0.0-alpha.56 - Firefox 76.0.1 (64-bit) - Node.js v10.15.3 - Operating system and version (desktop or mobile): Ubuntu 18.04 Reproducible Demo The entire code is present here https://github.com/react-native-bootstrap/react-native-bootstrap/tree/master/website — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#2853>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAKBCHOUMOFDGXGNFXES64LRUKOEFANCNFSM4NPIQJOQ> .

[sanjeevyadavIT]

Hi @yangshun I don't have a website, I just want to deploy the website on github pages at url react-native-boostrap.io, could you help me with configuration

[yangshun]

You need a CNAME file as well in static with the contents react-native-boostrap.io.

This is not a Docusaurus problem, so I'm closing this.

[sanjeevyadavIT]

@yangshun I ran yarn deploy it created a build folder at my local computer, I'm trying to run index.html file from that local build folder, that is also not rendering properly, you can see yourself, i have provided the repo.

Also I tried, creating a CNAME file in static folder, and redeploying it, still same effect

[yangshun]

Are you using a local webserver to run the files? You can start one using Python. If you just double click and open the files it would not work.

[sanjeevyadavIT]

No I just opened the index.html file on browser

Ok I understand it won't work without local server, but why it is not working on github pages, I have created a CNAME file in static folder whose content is react-native-bootstrap.io

and this is my docusaurus.config.js

module.exports = {
  title: 'React Native Bootstrap',
  tagline: 'Bootstrap components built for React Native',
  url: 'https://react-native-bootstrap.github.io',
  baseUrl: '/',
  favicon: 'img/rnb.png',
  organizationName: 'react-native-bootstrap', // Usually your GitHub org/user name.
  projectName: 'react-native-bootstrap', // Usually your repo name.
  themeConfig: { ...}
};

[yangshun]

Did you enable GitHub pages from your repo settings?

[sanjeevyadavIT]

[tsuz]

Just FYI, I couldn't touch the CNAME so I resolved this by setting --out-dir in docusaurus build. The command was

yarn build --out-dir build/<subdirectory>

[noworry-b-still]

You need to use CNAME file only if you have custom domain linked to your website. If there is no such thing, then configuring package.json file would work fine.

[iamadityac]

Hi @sanjeevyadavIT ,

I have the same issue as you,
Have you got any solution to it?

Also Just want to know, After running yarn build can we run a static website through a browser without running any server?

[noworry-b-still]

Hi @sanjeevyadavIT ,

I have the same issue as you,
Have you got any solution to it?

Also Just want to know, After running yarn build can we run a static website through a browser without running any server?

Hello @iamadityac

yes, it is possible to run a static website through a browser.
Also mention your problem clearly so we can help u