Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Webpack #1

Open
wants to merge 10 commits into
base: main
Choose a base branch
from
Open

Webpack #1

wants to merge 10 commits into from

Conversation

lewisrenfrew
Copy link
Collaborator

@lewisrenfrew lewisrenfrew commented Nov 17, 2021

two seperate webpack build process

  • webpack.config outlines the production build, which builds components to the /dist/ folder to be rendered on the server
  • webpack.dev.config does a dev server build to the /build/ directory to serve a single component up on localhost:3000 for development

I can show and tell this next week if there's interest

ReactSiteConfiguration.Configuration = new ReactSiteConfiguration()
.AddScript("~/Components/Sample.jsx");
// todo - better routing?
app.UseMvc(routes => { routes.MapRoute(name: "default", template: "{controller=Home}/{action=Index}"); });
Copy link
Collaborator Author

@lewisrenfrew lewisrenfrew Nov 17, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

every component can be rendered on the server at its own route. This is the index route but in practise you'd use as a specific route for own componenet obviously

@Html.React("Components.Sample", new { name = Model.Name })
Copy link
Collaborator Author

@lewisrenfrew lewisrenfrew Nov 17, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you specify which component to render in the routes corresponding view. This is the index view corresponding to the index route above, and just renders a simple sample componenet with props dervied from the model (Person.cs)

@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="en">
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this file is just for the dev server build.

ReactDOM.render(
<Sample />,
document.getElementById('root')
);
Copy link
Collaborator Author

@lewisrenfrew lewisrenfrew Nov 17, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this file is just for the dev build too. You'd swap 'Sample' out for the component you were developing. you'd pass in any test data as props here for rendering

Copy link

@RossStewart RossStewart left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks very useful, definitely keen to see it in a show and tell.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants