How to deploy React app (create-react-app) to Back4App?

I've created an React app with create-react-app and I want to deploy it to Back4App.

The problem is I want to deploy the build folder and not the public folder (which I understand is the default for Back4App / ParsePlatform).

So far, I haven't found any way to config deploy to use anything other than the public folder.

Any solution / workaround to this?

asked Nov 17 '18 at 13:47

marco alves

1,14411223

all build does is create the files and put them in the build folder on your development machine, but they don't have to be in a build folder on your server; you can simply copy the contents of the build folder into the public folder.

– Claies
Nov 17 '18 at 14:42

But it creates kinda of a circular loop as the build process also uses the public folder as source — cleanest way would be to configure the deploy folder to whatever we need

– marco alves
Nov 17 '18 at 14:58

I guess I'm just confused here; it seems as though the workflow for back4app assumes you are going to deploy directly from your source and not use build at all. back4app.com/docs/javascript/react-template

– Claies
Nov 17 '18 at 15:02

1

You're right. I'm just double checking if there is any way around it. It would be better for back4app to have public as default but let us configure build (or other) if required.

– marco alves
Nov 17 '18 at 18:18

add a comment |

I've created an React app with create-react-app and I want to deploy it to Back4App.

The problem is I want to deploy the build folder and not the public folder (which I understand is the default for Back4App / ParsePlatform).

So far, I haven't found any way to config deploy to use anything other than the public folder.

Any solution / workaround to this?

asked Nov 17 '18 at 13:47

marco alves

1,14411223

all build does is create the files and put them in the build folder on your development machine, but they don't have to be in a build folder on your server; you can simply copy the contents of the build folder into the public folder.

– Claies
Nov 17 '18 at 14:42

But it creates kinda of a circular loop as the build process also uses the public folder as source — cleanest way would be to configure the deploy folder to whatever we need

– marco alves
Nov 17 '18 at 14:58

I guess I'm just confused here; it seems as though the workflow for back4app assumes you are going to deploy directly from your source and not use build at all. back4app.com/docs/javascript/react-template

– Claies
Nov 17 '18 at 15:02

1

You're right. I'm just double checking if there is any way around it. It would be better for back4app to have public as default but let us configure build (or other) if required.

– marco alves
Nov 17 '18 at 18:18

add a comment |

I've created an React app with create-react-app and I want to deploy it to Back4App.

The problem is I want to deploy the build folder and not the public folder (which I understand is the default for Back4App / ParsePlatform).

So far, I haven't found any way to config deploy to use anything other than the public folder.

Any solution / workaround to this?

asked Nov 17 '18 at 13:47

marco alves

1,14411223

I've created an React app with create-react-app and I want to deploy it to Back4App.

The problem is I want to deploy the build folder and not the public folder (which I understand is the default for Back4App / ParsePlatform).

So far, I haven't found any way to config deploy to use anything other than the public folder.

Any solution / workaround to this?

reactjs parse.com create-react-app back4app

asked Nov 17 '18 at 13:47

marco alves

1,14411223

asked Nov 17 '18 at 13:47

marco alves

1,14411223

asked Nov 17 '18 at 13:47

marco alves

1,14411223

asked Nov 17 '18 at 13:47

marco alves

1,14411223

asked Nov 17 '18 at 13:47

marco alves

1,14411223

all build does is create the files and put them in the build folder on your development machine, but they don't have to be in a build folder on your server; you can simply copy the contents of the build folder into the public folder.

– Claies
Nov 17 '18 at 14:42

But it creates kinda of a circular loop as the build process also uses the public folder as source — cleanest way would be to configure the deploy folder to whatever we need

– marco alves
Nov 17 '18 at 14:58

I guess I'm just confused here; it seems as though the workflow for back4app assumes you are going to deploy directly from your source and not use build at all. back4app.com/docs/javascript/react-template

– Claies
Nov 17 '18 at 15:02

1

You're right. I'm just double checking if there is any way around it. It would be better for back4app to have public as default but let us configure build (or other) if required.

– marco alves
Nov 17 '18 at 18:18

add a comment |

all build does is create the files and put them in the build folder on your development machine, but they don't have to be in a build folder on your server; you can simply copy the contents of the build folder into the public folder.

– Claies
Nov 17 '18 at 14:42

But it creates kinda of a circular loop as the build process also uses the public folder as source — cleanest way would be to configure the deploy folder to whatever we need

– marco alves
Nov 17 '18 at 14:58

I guess I'm just confused here; it seems as though the workflow for back4app assumes you are going to deploy directly from your source and not use build at all. back4app.com/docs/javascript/react-template

– Claies
Nov 17 '18 at 15:02

1

You're right. I'm just double checking if there is any way around it. It would be better for back4app to have public as default but let us configure build (or other) if required.

– marco alves
Nov 17 '18 at 18:18

all build does is create the files and put them in the build folder on your development machine, but they don't have to be in a build folder on your server; you can simply copy the contents of the build folder into the public folder.

– Claies
Nov 17 '18 at 14:42

But it creates kinda of a circular loop as the build process also uses the public folder as source — cleanest way would be to configure the deploy folder to whatever we need

– marco alves
Nov 17 '18 at 14:58

I guess I'm just confused here; it seems as though the workflow for back4app assumes you are going to deploy directly from your source and not use build at all. back4app.com/docs/javascript/react-template

– Claies
Nov 17 '18 at 15:02

You're right. I'm just double checking if there is any way around it. It would be better for back4app to have public as default but let us configure build (or other) if required.

– marco alves
Nov 17 '18 at 18:18

add a comment |

1 Answer
1

active

oldest

votes

If you are using B4A CLI, one of the easiest ways to deploy a create-react-app is, firstly, changing the build script into your package.json as below snippet:

...

"scripts": {

    "start": "react-scripts start",

    "build": "react-scripts build && cp -r build/* {{PATH-TO-YOUR-B4A-APP}}/public",

    "test": "react-scripts test",

    "eject": "react-scripts eject"

  },

...

As you can see, you just need to move all content inside create-react-app build folder to the public folder of your cloud code. After that, move to your app path and run b4a deploy.

Also, you could add a step to clear all public folder content before move the new stuff, but be careful with this step.

Otherwise, you could access the Back4app Parse-Dashboard into the Cloud Code Functions and deploy all the build stuff in public folder using the browser interface.

This is a live demo of a create-react-app deployed in Back4App.

edited Dec 9 '18 at 19:00

answered Dec 8 '18 at 20:06

Lucas Alencar

1107

1

Thanks I’m going to try the dashboard option. Changing the build script seems to work just for one deployment as we will lose the default index.html in the public folder after running the first time. Right?

– marco alves
Dec 9 '18 at 8:46

1

I've edited the snippet to a better understanding, you'll have two different projects: one is your ReactJS and the other is your Back4App App. So the Build script will move all the built content from your ReactJS project to your cloud code public folder so that the public folder into your ReactJS project will keep the same. It's kind of confused 'cause the folders have the same name, but I hope it is more clear now.

– Lucas Alencar
Dec 9 '18 at 19:09

Now I understood it, and accepted the answer.

– marco alves
Dec 10 '18 at 8:24

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53351821%2fhow-to-deploy-react-app-create-react-app-to-back4app%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

If you are using B4A CLI, one of the easiest ways to deploy a create-react-app is, firstly, changing the build script into your package.json as below snippet:

...

"scripts": {

    "start": "react-scripts start",

    "build": "react-scripts build && cp -r build/* {{PATH-TO-YOUR-B4A-APP}}/public",

    "test": "react-scripts test",

    "eject": "react-scripts eject"

  },

...

As you can see, you just need to move all content inside create-react-app build folder to the public folder of your cloud code. After that, move to your app path and run b4a deploy.

Also, you could add a step to clear all public folder content before move the new stuff, but be careful with this step.

Otherwise, you could access the Back4app Parse-Dashboard into the Cloud Code Functions and deploy all the build stuff in public folder using the browser interface.

This is a live demo of a create-react-app deployed in Back4App.

edited Dec 9 '18 at 19:00

answered Dec 8 '18 at 20:06

Lucas Alencar

1107

1

Thanks I’m going to try the dashboard option. Changing the build script seems to work just for one deployment as we will lose the default index.html in the public folder after running the first time. Right?

– marco alves
Dec 9 '18 at 8:46

1

I've edited the snippet to a better understanding, you'll have two different projects: one is your ReactJS and the other is your Back4App App. So the Build script will move all the built content from your ReactJS project to your cloud code public folder so that the public folder into your ReactJS project will keep the same. It's kind of confused 'cause the folders have the same name, but I hope it is more clear now.

– Lucas Alencar
Dec 9 '18 at 19:09

Now I understood it, and accepted the answer.

– marco alves
Dec 10 '18 at 8:24

add a comment |

If you are using B4A CLI, one of the easiest ways to deploy a create-react-app is, firstly, changing the build script into your package.json as below snippet:

...

"scripts": {

    "start": "react-scripts start",

    "build": "react-scripts build && cp -r build/* {{PATH-TO-YOUR-B4A-APP}}/public",

    "test": "react-scripts test",

    "eject": "react-scripts eject"

  },

...

As you can see, you just need to move all content inside create-react-app build folder to the public folder of your cloud code. After that, move to your app path and run b4a deploy.

Also, you could add a step to clear all public folder content before move the new stuff, but be careful with this step.

Otherwise, you could access the Back4app Parse-Dashboard into the Cloud Code Functions and deploy all the build stuff in public folder using the browser interface.

This is a live demo of a create-react-app deployed in Back4App.

edited Dec 9 '18 at 19:00

answered Dec 8 '18 at 20:06

Lucas Alencar

1107

1

Thanks I’m going to try the dashboard option. Changing the build script seems to work just for one deployment as we will lose the default index.html in the public folder after running the first time. Right?

– marco alves
Dec 9 '18 at 8:46

1

I've edited the snippet to a better understanding, you'll have two different projects: one is your ReactJS and the other is your Back4App App. So the Build script will move all the built content from your ReactJS project to your cloud code public folder so that the public folder into your ReactJS project will keep the same. It's kind of confused 'cause the folders have the same name, but I hope it is more clear now.

– Lucas Alencar
Dec 9 '18 at 19:09

Now I understood it, and accepted the answer.

– marco alves
Dec 10 '18 at 8:24

add a comment |

If you are using B4A CLI, one of the easiest ways to deploy a create-react-app is, firstly, changing the build script into your package.json as below snippet:

...

"scripts": {

    "start": "react-scripts start",

    "build": "react-scripts build && cp -r build/* {{PATH-TO-YOUR-B4A-APP}}/public",

    "test": "react-scripts test",

    "eject": "react-scripts eject"

  },

...

As you can see, you just need to move all content inside create-react-app build folder to the public folder of your cloud code. After that, move to your app path and run b4a deploy.

Also, you could add a step to clear all public folder content before move the new stuff, but be careful with this step.

Otherwise, you could access the Back4app Parse-Dashboard into the Cloud Code Functions and deploy all the build stuff in public folder using the browser interface.

This is a live demo of a create-react-app deployed in Back4App.

edited Dec 9 '18 at 19:00

answered Dec 8 '18 at 20:06

Lucas Alencar

1107

If you are using B4A CLI, one of the easiest ways to deploy a create-react-app is, firstly, changing the build script into your package.json as below snippet:

...

"scripts": {

    "start": "react-scripts start",

    "build": "react-scripts build && cp -r build/* {{PATH-TO-YOUR-B4A-APP}}/public",

    "test": "react-scripts test",

    "eject": "react-scripts eject"

  },

...

As you can see, you just need to move all content inside create-react-app build folder to the public folder of your cloud code. After that, move to your app path and run b4a deploy.

Also, you could add a step to clear all public folder content before move the new stuff, but be careful with this step.

Otherwise, you could access the Back4app Parse-Dashboard into the Cloud Code Functions and deploy all the build stuff in public folder using the browser interface.

This is a live demo of a create-react-app deployed in Back4App.

edited Dec 9 '18 at 19:00

answered Dec 8 '18 at 20:06

Lucas Alencar

1107

edited Dec 9 '18 at 19:00

answered Dec 8 '18 at 20:06

Lucas Alencar

1107

answered Dec 8 '18 at 20:06

Lucas Alencar

1107

answered Dec 8 '18 at 20:06

Lucas Alencar

1107

1

Thanks I’m going to try the dashboard option. Changing the build script seems to work just for one deployment as we will lose the default index.html in the public folder after running the first time. Right?

– marco alves
Dec 9 '18 at 8:46

1

I've edited the snippet to a better understanding, you'll have two different projects: one is your ReactJS and the other is your Back4App App. So the Build script will move all the built content from your ReactJS project to your cloud code public folder so that the public folder into your ReactJS project will keep the same. It's kind of confused 'cause the folders have the same name, but I hope it is more clear now.

– Lucas Alencar
Dec 9 '18 at 19:09

Now I understood it, and accepted the answer.

– marco alves
Dec 10 '18 at 8:24

add a comment |

1

Thanks I’m going to try the dashboard option. Changing the build script seems to work just for one deployment as we will lose the default index.html in the public folder after running the first time. Right?

– marco alves
Dec 9 '18 at 8:46

1

I've edited the snippet to a better understanding, you'll have two different projects: one is your ReactJS and the other is your Back4App App. So the Build script will move all the built content from your ReactJS project to your cloud code public folder so that the public folder into your ReactJS project will keep the same. It's kind of confused 'cause the folders have the same name, but I hope it is more clear now.

– Lucas Alencar
Dec 9 '18 at 19:09

Now I understood it, and accepted the answer.

– marco alves
Dec 10 '18 at 8:24

Thanks I’m going to try the dashboard option. Changing the build script seems to work just for one deployment as we will lose the default index.html in the public folder after running the first time. Right?

– marco alves
Dec 9 '18 at 8:46

I've edited the snippet to a better understanding, you'll have two different projects: one is your ReactJS and the other is your Back4App App. So the Build script will move all the built content from your ReactJS project to your cloud code public folder so that the public folder into your ReactJS project will keep the same. It's kind of confused 'cause the folders have the same name, but I hope it is more clear now.

– Lucas Alencar
Dec 9 '18 at 19:09

Now I understood it, and accepted the answer.

– marco alves
Dec 10 '18 at 8:24

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Wsrtjtyk